animation

animation系列的属性用来配置 CSS 动画：

• animation-delay: 动画在指定时间后开始运行，默认0s，单位可以是s或者ms
• animation-direction: 动画的多次播放方式
  • normal (default) 正常循环播放
  • alternate 动画交替播放，先正向，然后反向
  • reverse 每周期内动画反向播放
  • alternate-reverse 先反向，再正向
• animation-duration: 一个动画周期的时间长度，默认为0s，单位可以是s或者ms
• animation-iteration-count: 动画播放次数，默认为1
  • <number> 可以是小数
  • infinite 无限播放
  • 2, 1.5 先播放 2 次，再播放 1.5 次，然后重新开始播放 2 次，……
• animation-keyframes: 指定动画序列名称，由@keyframes定义
  • none 不使用动画序列
  • IDENT @keyframes 定义的动画序列名称
• animation-play-state: 运行或者暂停动画播放，可选值running, paused
• animation-timing-function: unknown
• animation-fill-mode: unknown

animation- 系列的属性可以合并简写，简写顺序是

• animation-keyframes
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction

例如

.demo {
    animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

both设置对象状态为动画结束或开始的状态，结束时状态优先。