animation（动画）CSS3

来源：MDN-animation

动画序列

1. 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
2. 请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
3. 0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列。
4. 在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

综合写法

animation：动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向  动画等待或者结束的状态;

注意：综合写法不包括：animation-play-state。如果有多个动画，用逗号隔开

属性	描述	默认值	其他参数	是否可省略
animation	表示简写（除了 animation-play-state 属性）			否
@keyframes	定义动画			否
animation-name	定义@keyframes 动画的名称			否
animation-duration	定义动画完成一个周期需要的时间	0s		否
animation-timing-function	定义动画的速度曲线	ease（以低速开始然后加快最后以低速结束）	linear（匀速） ease-in（低速开始） ease-out（低速结束） ease-in-out（低速开始和结束） steps()（步长）	是
animation-delay	规定动画何时开始（延时）	0（不延时）		是
animation-iteration-count	定义动画被播放的次数	1（播放一次）	infinite（循环播放）	是
animation-direction	定义动画是否在下一周期逆向播放（反着来）	normal（不反着来）	alternate（逆向播放）	是
animation-play-state	定义动画是否正在运行或暂停	running	paused（动画停止）	是
animation-fill-mode	定义动画结束后状态	forwards（停在结束的位置）	backwards（返回来）	是

/*用keyframes 定义动画（类似定义类选择器）*/
@keyframes 动画名称 {
  0% {
    width: 100px;
  }
  100% {
    width: 200px;
  }
}

/*元素使用动画*/
div {
  width: 200px;
  height: 200px;
  background-color: aqua;
  margin: 100px auto;
  /* 调用动画 */
  animation-name: 动画名称;
  /* 持续时间 */
  animation-duration: 持续时间;
}

animation: myfirst 5s linear 2s infinite alternate;