美文网首页
CSS3过渡和动画

CSS3过渡和动画

作者: 盖被吹空调 | 来源:发表于2017-02-18 01:10 被阅读0次

    1.transition过渡

    • 1.指定元素transition: 1s height, 1s width;
    • 2.延迟
    transition: 1s height, 1s 1s width;
    // 上面代码指定,width在1秒之后再开始变化,也就是延迟(delay)1秒
    
    • 3.状态变化速度
    • ease:慢-快-慢(默认)
    • linear:匀速
    • ease-in:加速
    • ease-out:减速
    • cubic-bezier函数:自定义速度模式演示

    语法

    // 完整写法
    transition: 1s 1s height linear;
    // 常用写法
    transition: 1s;
    

    注意transition一般加在原始元素上,不要加在hover,active等状态上,不然只针对某种状态。

    2.animation动画

    定义动画

    • 0%可以用from代表,100%可以用to代表
    @keyframes rainbow {
      0% { background: #c00; }
      50% { background: orange; }
      100% { background: yellowgreen; }
    }
    // 相当于
    @keyframes rainbow {
      from { background: #c00 }
      50% { background: orange }
      to { background: yellowgreen }
    }
    
    • 如果省略某个状态,浏览器会自动推算中间状态
    @keyframes rainbow {
      50% { background: orange }
      to { background: yellowgreen }
    }
    
    @keyframes rainbow {
      to { background: yellowgreen }
    }
    
    • 可以把多个状态写在一行
    @keyframes pound {
      from,to { transform: none; }
      50% { transform: scale(1.2); }
    }
    

    动画参数

    • animation-fill-mode 动画结束时的状态
    • none:默认值,回到动画没开始时的状态
    • forwards:让动画停留在结束状态
    • backwards:让动画回到第一帧的状态
    • both: 根据animation-direction(见后)轮流应用forwards和backwards规则
    • animation-direction动画循环的方式
    • normal默认值
    • alternate
    • reverse
    • alternate-reverse
      具体参照下图


      animation-direction.png

      常用的值是normal和reverse。浏览器对其他值的支持情况不佳,应该慎用。

    动画语法

    div:hover {
      animation: 1s 1s rainbow linear 3 forwards normal;
    }
    // 相当于
    div:hover {
      animation-name: rainbow;
    // 动画名称
      animation-duration: 1s;
    // 持续时间
      animation-timing-function: linear;
    // 动画状态
      animation-delay: 1s;
    // 动画延迟
      animation-fill-mode:forwards;
    // 动画结束状态
      animation-direction: normal;
    // 动画循环方式
      animation-iteration-count: 3;
    // 动画循环次数,设为infinite则为无限循环
    }
    

    steps函数

    用于实现逐帧动画

    div:hover {
     animation: 10s rainbow infinite steps(10,start);
    }
    动画将被分成10帧来播放,而不是平滑过渡。第二个参数默认为end,可设置为start。
    

    效果参照

    动画暂停

    animation-play-state

    div {
        animation: spin 1s linear infinite;
        animation-play-state: paused;
    }
    
    div:hover {
      animation-play-state: running;
    }
    

    相关文章

      网友评论

          本文标题:CSS3过渡和动画

          本文链接:https://www.haomeiwen.com/subject/zrahwttx.html