语法：
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
- name: 规定要绑定到选择器的 keyframe 名称。多个名称之间用逗号分隔。
- duration: 规定完成动画所花费的时间，以秒（s）或毫秒（ms）为单位。
- timing-function: 规定动画的速度曲线。常见的有 ease、linear、ease-in、ease-out 等。
- delay: 规定在动画开始之前等待的时间，以秒（s）或毫秒（ms）为单位。
- iteration-count: 规定动画应该播放的次数。可以设置具体的次数，也可以使用 infinite 表示无限循环。
- direction: 规定是否应该轮流反向播放动画。常见的有 normal（默认值，正向播放）、reverse（反向播放）和 alternate（轮流正向和反向播放）。
- fill-mode: 规定动画执行之前和之后的样式。常见的有 forwards（保持最后一个关键帧处的样式）和 backwards（保持第一个关键帧处的样式）。
- play-state: 规定动画是运行还是暂停。常见的有 running 和 paused。
示例：
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.slide-animation {
animation: slide 2s ease-in-out 0.5s infinite alternate;
}
在上述示例中，通过 @keyframes 定义了一个名为 slide 的关键帧动画，然后将这个动画应用于类名为 .slide-animation 的元素。该元素将以 2 秒的时间在 x 轴方向上往右移动 100 像素，采用缓动函数 ease-in-out，延迟 0.5 秒开始，无限循环并在每次循环中轮流正向和反向播放。
animation 属性提供了强大的动画控制能力，允许你创建各种炫丽的动画效果。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5979/CSS