相对于传统的脚本实现动画技术，使用CSS动画有三个主要的有点：
- 能够非常容易的创建动画，你甚至不需要使用JavaScript就能够创建动画。
- 动画运行效果良好。甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术来保证动画表现尽可能的流畅。而使用JavaScript实现的动画通常效果不佳。
- 让浏览器控制动画序列。允许浏览器优化性能和效果。比如降低隐藏选项卡中的动画更新频率。
配置动画
创建动画序列。需要使用animation或者其子属性。该属性允许配置动画时间、时长以及其他动画细节。但是该属性不能配置动画的实际表现部分。动画的实际表现是由@keyframes来控制的。
animation的属性
- animation-delay:设置延时。元素加载完成到执行动画这段需要花费多少时间。
- animation-direction:设置动画在每次运行完之后是反向运行还是重新回到开始位置运行。
- animation-duration: 设置一个动画的周期时长
- animation-iteration-count: 设置动画重复次数
- animation-name: 指定由
@keyframes指定的关键帧的名称 - animation-play-state: 允许暂停和恢复动画
- animation-timing-function: 设置动画速度。即通过加速度曲线。设置动画在关键帧是如何变化的。
- animation-fill-mode: 指定动画运行前后为目标元素应用样式。
使用 keyframes 定义动画序列
一旦完成动画的时间设置，接下来就需要定义动画的表现。通过使用@keyframes建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。
因为动画的时间设置是通过 CSS 样式定义的，关键帧使用 percentage 来指定动画发生的时间点。0% 表示动画的第一时刻，100% 表示动画的最终时刻。因为这两个时间点十分重要，所以还有特殊的别名：from 和 to。这两个都是可选的，若 from/0% 或 to/100% 未指定，则浏览器使用计算值开始或结束动画。
也可包含额外可选的关键帧，描述动画开始和结束之间的状态。
