CSS3新增特性 animation属性

末蓝、 2021-09-02 04:02 487阅读 0赞

## CSS3 animation属性 ##

1.  使用格式： animation: name duration timing-function delay iteration-count direction fill-mode;
2.  作用：通过给元素添加animation属性，可以赋予该元素动画效果。
3.  使用实例：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style> .demo{ width: 500px; height: 500px; background-color: gold; /* ease一次 ，infinite无限次 */ animation: fedem 4s infinite; -webkit-animation: fedem 4s infinite; -moz-animation: fedem 4s infinite; -o-animation：fedem 4s infinite; -ms-animation：fedem 4s infinite; animation-fill-mode:both; /* animation: name duration timing-function delay iteration-count direction fill-mode; */ } @keyframes fedem{ 0%{ opacity: 0; } 50%{ opacity: 1; } 100%{ opacity: 0; } } </style>
    </head>
    <body>
        <div class="demo"></div>
    </body>
    </html>

1.  常用的几种属性

（1）animation-name(动画名称）  
animation-name属性是必须存在的，因为animation-name的值默认是none，没有动画。

（2）animation-duration(动画执行一次所需时间)  
animation-duration属性也是必须存在的，因为animation-duration的值默认是0，没有动画。

（3）animation-delay(动画在开始前的延迟时间)  
animation-delay的值可以是秒（s）或者是毫秒（ms）,默认值是0，没有延迟。

（4）animation-timing-function(动画以何种运行轨迹完成一个周期)  
animation-timing-function的值是贝塞尔曲线，默认值是ease,表示动画以低速开始，然后加速，最后在结束前变慢。

最常用的值有以下几个：

（a）linear:表示动画从头到尾的速度都是相同的。

（b）ease-in:表示动画以低速开始。

（c）ease-out:表示动画以低速结束。

（d）ease-in-out:表示动画以低速开始和结束。

（5）animation-iteration-count(动画播放次数)

属性值有两种：

（a）直接写数字，自定义想要播放动画的次数。

（b）infinite：设置动画无线循环播放。

（c）ease：设置动画执行一次

（6）animation-fill-mode(定义元素动画结束以后或者未开始的元素样式)

默认值为none，表示不会在动画结束或者未开始时给元素 添加样式

常用属性值为：

（a）forwards:表示动画结束后，元素直接接使用当前样式（**动画保持在动画最后一帧的样式**，最后一个关键帧取决于animation-direction和animation-iteration-count的值）

（b）backwards:表示在动画延迟时间元素使用关键帧中from的属性值或者to属性值（当animation-direction为reverse或者alternate-reverse时），动画将在应用于目标时立即应用第一个关键帧中定义的值，并在animation-delay期间保留此值，**元素保持为第一帧中的状态**

（c）both：动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性，**动画停留在最后一个关键帧中定义的状态**

参考：[animation动画中forwords和both的区别][animation_forwords_both]

1.  animation-direction:定义是否循环交替反向播放动画

属性值：

参考：[css3中的animation属性][css3_animation]

[animation_forwords_both]: https://blog.csdn.net/weixin_42989576/article/details/100551602
[css3_animation]: http://www.mamicode.com/info-detail-2242089.html