前端之HTML5，CSS3（五）
动画(animation)
动画是使元素从一种样式逐渐变化为另一种样式的效果。通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
动画的属性
基本语法：选择器 {动画名称 动画持续时间 动画运动曲线 动画开始时间 动画播放次数 动画是否倒叙播放}。在设置动画属性之前，需要使用@keyframes 规则对动画样式进行设定，基本格式为 @keyframes 动画名称 {from{样式1;} to{样式2;}}。设定@keyframes规则后，通过动画名称绑定到需要制作动画的元素上，生成动画。
| 属性 | 描述 |
| @keyframes | 规定动画样式 |
| animation | 动画属性连写 |
| animation-name | 规定@keyframes动画名称 |
| animation-duration | 规定动画完成一次播放花费的时间，默认为0 |
| animation-timing-function | 规定动画的时间速度曲线，默认为ease |
| animation-delay | 规定动画开始播放时间，默认为0 |
| animation-iteration-count | 规定动画播放次数,默认为1 |
| animation-direction | 规定动画下一次播放是否倒叙播放，默认为normal |
| animation-play-state | 规定动画状态时运行或者暂停，默认为running |
@keyframes
规定动画运动规则，声明动画内容，用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%，0% 是动画的开始，100% 是动画的完成。使用百分比可以更加细化时间以及动画样式。
@keyframes my-animation { from { margin-left: 0; /*开始在位置0*/ } to { margin-left: 1000px; /*结束结束在横向位置1000px*/ } } /*或者*/ @keyframes my-animation { 0% { margin-left: 0; /*开始在位置0*/ } 25% { margin-left: 250px; /*1/4的播放时间在横向位置250px*/ } 50% { margin-left: 500px; /*1/2的播放时间在横向位置500px*/ } 75% { margin-left: 750px; /*3/4的播放时间在横向位置750px*/ } 100% { margin-left: 1000px; /*结束时间在横向位置1000px*/ } }
animation
动画属性连写，连写顺序为：动画名称(animation-name) 动画持续时间(animation-duration) 动画运动曲线(animation-timing-function) 动画开始时间(animation-delay) 动画播放次数(animation-iteration-count) 动画是否倒叙播放(animation-direction)。其中animation-name和animation-duration为必须属性，不能缺省，其他属性可以不必要可以省略。
animation-name
动画名称可以自行设定，但是一定要注意声明(@keyframes部分)和调用部分(animation部分)的动画名称一致。
animation-duration
animation-duration 属性定义动画完成一个周期所需要的时间，以秒(s)或毫秒(ms)计。属性值为ns或者nms，其中n为非负数，当n为0时，无动画效果。
animation-timing-function
动画变化的速度曲线，属性值有：linear(匀速)，ease(慢-快-慢)，ease-in(慢-快)，ease-out(快-慢)，ease-in-out(慢-快-慢)...
animation-delay
定义动画开始前等待的时间，以秒或毫秒计。可选属性，默认时间为0s开始。
animation-iteration-count
定义动画的播放次数，默认为1次。可以设置属性值为infinite，表示播放无限次数。
animation-direction
定义是否应该轮流反向播放动画，属性值：normal(不倒序播放)，alternate(倒序播放)。注意，设置倒序播放时，动画正序播放和倒序播放一遍，播放次数为2。
animation-play-state
规定动画正在运行还是暂停，属性值：running(播放状态)，paused(暂停状态)。一般在JS中使用该属性，设定动画播放或者暂停。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动画-测试</title> <style type="text/css"> div { width: 100px; height: 100px; background-color: skyblue; animation: move 2s ease 0s infinite alternate; } @keyframes move { from { margin-left: 0; } to { margin-left: 1000px; } } </style> </head> <body> <div></div> </body> </html>
效果自行测试。