| 属性 | 描述 | CSS | | --- | --- | --- | | [@keyframes](http://www.w3school.com.cn/cssref/pr_keyframes.asp "CSS3 @keyframes 规则") | 规定动画。 | 3 | | [animation](http://www.w3school.com.cn/cssref/pr_animation.asp "CSS3 animation 属性") | 所有动画属性的简写属性，除了 animation-play-state 属性。 | 3 | | [animation-name](http://www.w3school.com.cn/cssref/pr_animation-name.asp "CSS3 animation-name 属性") | 规定 @keyframes 动画的名称。 | 3 | | [animation-duration](http://www.w3school.com.cn/cssref/pr_animation-duration.asp "CSS3 animation-duration 属性") | 规定动画完成一个周期所花费的秒或毫秒。 | 3 | | [animation-timing-function](http://www.w3school.com.cn/cssref/pr_animation-timing-function.asp "CSS3 animation-timing-function 属性") | 规定动画的速度曲线。 | 3 | | [animation-delay](http://www.w3school.com.cn/cssref/pr_animation-delay.asp "CSS3 animation-delay 属性") | 规定动画何时开始。 | 3 | | [animation-iteration-count](http://www.w3school.com.cn/cssref/pr_animation-iteration-count.asp "CSS3 animation-iteration-count 属性") | 规定动画被播放的次数。数字（动画执行次数）或则infinite(无限执行) | 3 | | [animation-direction](http://www.w3school.com.cn/cssref/pr_animation-direction.asp "CSS3 animation-direction 属性") | 规定动画是否在下一周期逆向地播放。normal\|alternate\|reverse\|alternate-reverse | 3 | | [animation-play-state](http://www.w3school.com.cn/cssref/pr_animation-play-state.asp "CSS3 animation-play-state 属性") | 规定动画是否正在运行或暂停。paused\|running | 3 | | [animation-fill-mode](http://www.w3school.com.cn/cssref/pr_animation-fill-mode.asp "CSS3 animation-fill-mode 属性") | 规定对象动画时间之外的状态。none | 3 | **animation-direction:** * normal默认值从from向to运行每次都是这样 * reverse从to向from运行每次都是这样 * alternate从from向to运行重复执行动画时反向执行 * alternate-reverse从to向from运行重复执行动画时反向执行 **animation-fill-mode** | 值 | 描述 | | --- | --- | | none | 不改变默认行为。即动画执行完毕回到原来位置 | | forwards | 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。即动画执行完毕停止在动画结束的位置 | | backwards | 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。动画延时等待时，元素就会处于开始位置 | | both | 向前和向后填充模式都被应用。结合了forwards和 backwards| 带闪烁渐变的效果： ``` @keyframes shineRed { from {box-shadow: 0 0 5px #6E6C91; } 50% {box-shadow: 0 0 10px #51328C; } to {box-shadow: 0 0 5px #6E6C91; } } .shine_red:focus{ animation-name: shineRed; animation-duration: 15s; /*规定完成动画所花费的时间。默认值是 0，意味着没有动画效果。*/ /*animation-iteration-count: n|infinite; 定义动画播放次数的数值。|规定动画应该无限次播放。*/ animation-iteration-count: infinite; } /* box-shadow:添加一个或多个阴影; @-webkit-keyframes是对每一个动画定义时间轴，可以设置某个时间动画作用的元素是什么状态，后面跟的是用到的动画的名称，这里是shineRed（自定义的，方便记忆，红色发光取名为shineRed）。 具体就相当于一个时间轴，from表示刚开始的时候，to表示结束的时候，里面的样式都是可以自己定义的。 -webkit-animation-name就是调用上面定义的动画。 -webkit-animation-iteration-count表示动画的循环次数，用infinite表示无线循环。 */ ```