animation属性

animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

  • animation-name：指定执行哪一个关键帧动画

  • animation-duration：指定动画的持续时间

  • animation-timing-function：指定动画的变化曲线

  • animation-delay：指定延迟执行的时间

  • animation-iteration-count：指定动画执行的次数，执行infinite表示无限动画

  • animation-direction：指定方向，常用值normal和reverse

  • animation-fill-mode：执行动画最后保留哪一个值

    • none(默认值)：回到没有执行动画的位置
    • forwards：动画最后一帧的位置
    • backwards：动画第一帧的位置
  • animation-play-state：指定动画运行或者暂停（在JavaScript中使用，用于暂停动画）

关键帧

关键帧 keyframes 可以控制动画序列的中间步骤

  1. @keyframes slidein {
  2.   from {
  3.     transform: translateX(0%); 
  4.   }
  6.   to {
  7.     transform: translateX(100%);
  8.   }
  9. }

属性个数不定

@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

from 相当于0%，to 相当于100%。