属性 描述
animation 复合属性。检索或设置对象所应用的动画特效
animation-name 检索或设置对象所应用的动画名称
animation-duration 检索或设置对象动画的持续时间
animation-timing-function 检索或设置对象动画的过渡类型，定义keyframes每一段的运动轨迹
animation-delay 检索或设置对象动画延迟的时间
animation-iteration-count 检索或设置对象动画的循环次数 infinite无限
animation-direction 检索或设置对象动画在循环中是否反向运动 reverse 反向运动
animation-play-state 检索或设置对象动画的状态 执行或暂停
animation-fill-mode 检索或设置对象动画时间之外的状态

@keyframes 动画名称{}

  • 用来定义动画的关键帧，每一针分别做那些事情
  • 从百分之0到百分之百
  • 示例
    • @keyframes run {
      0% {}
      25% {}
      50%{}
      75% {}
      100% {}
      }

  • 使用

    • 给需要加动画的节点增加 animation：动画名称
    • div { animation: run 1s }

      设置多个动画

  • div {animation:动画名称 时间，动画名称，时间}

  • 如果动画时间相同那么就是并行运行

    animation-timing-function 过渡类型

  • 定义动画每一段的运动轨迹类型

  • image.png

    steps 属性

  • 接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。

  • 使用steps属性时，动画不会发生过渡，会根据strops（start, end）中的设置start的步数来发生改变很

    animation-fill-mode

    取值：

  • none：默认值。不设置对象动画之外的状态

  • forwards：设置对象状态为最后一针动画结束时的状态
  • backwards：设置对象状态为第一针动画开始时的状态
  • both：设置对象状态为动画结束或开始的状态
    • 开始之前状态为第一针，保留最后一针