css 入场动画_CSS3 animation 动画

一.animation基础语法：

参数解析：

(1).animation-name：规定动画的名称，利用它可以与@keyframes关联起来。

(2).animation-duration：规定动画的时长，时间是秒，比如5s。

(3).animation-timing-function：规定动画的过渡类型，可以使用内置固定的关键字，也可以自定义数据。

(4).animation-delay：规定动画开始前的延迟时间。

(5).animation-iteration-count：规定动画的重复次数。

(6).animation-direction：规定动画循环中是否会反向运动。

(7).animation-fill-mode：规定对象动画时间之外的状态。

(8).animation-play-state：规定动画是否正在运行或暂停。

有很多属性值从字面上不容易理解，不用担心，后面会有代码演示和对应属性的相关文章。

如果animation提供了多组属性值，那么组与组之间使用逗号分隔。

animation与border等属性一样，都是复合属性，可以使用复合写法，也可以将属性单独列出。

二.CSS动画的实质：

不要将动画效果想象的太神奇，之所以能够在视觉上呈现视觉效果，无非是元素属性值的持续变化。

比如元素的width属性，在10秒内，由10px持续变化到100px。