CSS3动画

CSS3 中的动画

---

什么是 CSS3 中的动画？

1.动画是使元素从一种样式逐渐变化为另一种样式的效果。
2.可以改变任意多的样式任意多的次数。
3.请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。
4.0% 是动画的开始，100% 是动画的完成。

---

animation css动画

animation 属性是一个简写属性，用于设置六个动画属性：
1.animation-name
2.animation-duration
3.animation-timing-function
4.animation-delay
5.animation-iteration-count
6.animation-direction
注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

---

a. animation-name

定义：animation-name 属性为 @keyframes 动画规定名称。
语法：animation-name: keyframename|none;
/Keyframename规定需要绑定到选择器的 keyframe 的名称。
none规定无动画效果（可用于覆盖来自级联的动画）。/

实例：

---

b. animation-duration

定义： animation-duration 属性定义动画完成一个周期所需要的时间，以秒或毫秒计。
语法：animation-duration: time;
/time 规定完成动画所花费的时间。默认值是 0，意味着没有动画效果。/

---

c. animation-timing-function

定义：animation-timing-function 规定动画的速度曲线。
速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。
速度曲线用于使变化更为平滑。

语法： animation-timing-function: value
animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值：

---

d. animation-delay

定义： animation-delay 属性定义动画何时开始。animation-delay 值以秒或毫秒计。
提示：允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画
语法： animation-delay: time
/time 可选。定义动画开始前等待的时间，以秒或毫秒计。默认值是 0。/

---

e. animation-iteration-count

定义： animation-iteration-count 属性定义动画的播放次数
语法：animation-iteration-count: n|infinite

/* n 定义动画播放次数的数值 infinite 规定动画应该无限次播放。*/

---

f. animation-direction

定义：animation-direction 属性定义是否应该轮流反向播放动画。
如果 animation-direction 值是 “alternate”，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。
注释：如果把动画设置为只播放一次，则该属性没有效果
语法：animation-direction: normal|alternate

/normal 默认值。动画应该正常播放。
alternate 动画应该轮流反向播放。/

---

实例：

html代码：

css代码：

---

效果：

---