CSS - 10 动画

10. 动画

• 动画和过渡类似，都可以实现一些动态效果。不同的是过渡需要在某个属性发生变化时才会触发，动画可以自动触发动态效果

• 设置动画效果，需要先设置一个关键帧，关键帧设置了动画执行的每一个步骤

  @keyframes test {
      from {
          margin-left: 0;
      }
  
      to {
          margin-left: 900px;
      }
  }
  

• 语法：

  • animation-name：指定动画的关键帧名称

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

  • animation-delay：动画效果的延迟，等待一段时间后再执行动画

  • animation-timing-function：动画的时序函数

  • animation-iteration-count：动画执行的次数

    • infinite 无限次执行

  • animation-direction 指定动画运行的方向

    • normal 从from向to运行，默认值
    • reverse 从to向from运行
    • alternate 从from向to运行，重复执行动画时反向执行
    • alternate-reverse 从to向from运行，重复执行动画时反向执行

  • animation-play-state 设置动画的执行状态

    • running 动画执行，默认值
    • paused 动画暂停

  • animation-fill-mode 动画的填充模式

    • none 动画执行完毕，元素回到原来位置
    • forwards 动画执行完毕，元素停止在动画结束的位置
    • backwards 动画延时等待时，元素就会处在开始位置
    • both 结合了forwards和backwards