CSS动画

喜欢ヅ旅行 2022-05-10 00:54 210阅读 0赞

摘自阮一峰老师的博客 [http://www.ruanyifeng.com/blog/2014/02/css\_transition\_and\_animation.html][http_www.ruanyifeng.com_blog_2014_02_css_transition_and_animation.html]

*  ### **transition** ###

/**简写**/
    img1{
        transition: 1s 1s height ease;
    }
    
    /**完整写法**/
    img2{
        transition-property: height;
        transition-duration: 1s;
        transition-delay: 1s;
        transition-timing-function: ease;
    }

transition-delay：指定了动画发生的顺序，使得多个不同的transition可以连在一起，形成复杂效果。

img{
        transition: 1s height, 1s 1s wight;
    }

transition-timing-function

> （1）linear：匀速
> 
> （2）ease-in：加速
> 
> （3）ease-out：减速
> 
> （4）cubic-bezier函数：自定义速度模式

注意点：

> transition需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。
> 
> （1）transition需要事件触发，所以没法在网页加载时自动发生。
> 
> （2）transition是一次性的，不能重复发生，除非一再触发。
> 
> （3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
> 
> （4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

*  ## Animation ##

注意：

> 需要指定动画一个周期持续的时间，以及动画效果的名称。
> 
> 默认情况下，动画只播放一次。加入infinite关键字，可以让动画无限次播放，也可指定播放次数。
> 
> chrome浏览器中需加webkit前缀

div:hover {
      animation: 1s 1s rainbow linear 3 forwards normal;
      -webkit-animation:1s 1s rainbow linear 3 forwards normal;
    }
    
    @keyframes rainbow {
      0% { background: #c00; }
      50% { background: orange; }
      100% { background: yellowgreen; }
    }
    
    @-webkit-keyframes rainbow {
      0% { background: #c00; }
      50% { background: orange; }
      100% { background: yellowgreen; }
    }
    /*
    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;
    }
    */

animation-fill-mode：动画结束以后，会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态，需要使用animation-fill-mode属性。

> （1）none：默认值，回到动画没开始时的状态。
> 
> （2）backwards：让动画回到第一帧的状态。
> 
> （3）forwards：让动画停在结束的状态。
> 
> （4）both: 根据animation-direction（见后）轮流应用forwards和backwards规则。

animation-direction：指定了动画播放的方向，常用normal和reverse。

animation-play-state：想让动画保持突然终止时的状态，可以将其设为paused。

[http_www.ruanyifeng.com_blog_2014_02_css_transition_and_animation.html]: http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html