CSS动画(animation)

简写属性

animation: [<animation-duration>||<animation-timing-function>||<animation-delay>||<animation-iteration-count>||<animation-direction>||<animation-fill-mode>||<animation-play-state>||<animation-name>]
初始值：0s ease 0s 1 normal none running none

• 将animation-name写在最后面是考虑到动画的标识符可能与某个动画的属性值相同（没有这种习惯的话，写最前面也行，这样更容易阅读），那么动画标识符不会解释为animation-name的值，除非再写一个相同的值
• 可见元素改为属性display:none;，然后又改为可见的时候，动画将重新播放

关键帧

关键帧块>>>关键帧
@keyframes animation_identifier {
  keyframe_selector {
    property: value;
    property: value;
  }
  keyframe_selector {
    property: value;
    property: value;
  }
}

• animation_identifier(关键帧标识符)作为animation-name的值

• keyframe_selector(关键帧选择符)使用from(相当于0%)或to(相当于100%)或百分数（不可以为[0,1]的小数）

• 如果存在重复关键帧、重复属性，但值不同，那么将被后面的关键帧覆盖

• 可以不写0%或者100%关键帧，会采用默认的属性值补上关键帧（border-radius默认值为none，所以最好初始化它的值）

js编辑css动画

• 脚本js编辑动画关键帧

  var cssRule = document.styleSheets[index].cssRules[index]; //这里的两个index是不同的，需要具体判断关键帧块的位置
  cssRule.appendRule('keyframe_selector {property: value;}');
  cssRule.deleteRule(...'keyframe_selector');
  cssRule.findRule(...'keyframe_selector');
  

• 动画三个事件：animationstart、animationend和animationiteration

  • animationstart会在动画开始时触发，会受到动画延迟的影响。一个元素有多个动画，那么每个动画都会触发该事件
  • animationend会在动画播放结束时触发（仅动画播放一次时）
  • animationiteration会在动画的一次迭代结束之后和下一次迭代开始之前触发（仅动画播放多次时）

animation-name

初始值：none

• 如果该属性无效，其他的动画属性也将无效

• 一开始关键帧标识符不存在，但后面通过某种方式又变成有效，那么又会应用

• 一个元素采用了多个动画，如果这些动画中有重复的属性，那么后面的动画将覆盖前面动画相同属性的值

animation-duration

单位：秒s、毫秒ms

初始值：0s

animation-iteration-count

初始值：1

取值范围：[ <number> | infinite ]

• 属性值不是整数，动画会在中途结束，例如：取值为1.25，那么在第二次迭代的25%处结束
• 属性值为0，动画依旧会播放，也会触发动画事件

animation-direction

初始值：normal

取值范围：[normal|reverse|alternate|alternate-reverse]

• normal：从0%到100%
• reverse：从100%到0%，同时逆转了animation-timing-function
• alternate：从0%到100%，再从100%到0%，之后依次迭代
• alternate-reverse：从100%到0%，再从0%到100%，之后依次迭代

animation-delay

初始值：0s

• 负的延迟可以让动画立即开始播放，但是从动画的中途开始，例如：在元素上声明了animation-delay: -4s和animation-duration: 10s，元素将从整个动画的40%处立即开始播放，并在6s后结束。

animation-timing-function

初始值：ease

取值：[ease|linear|ease-in|ease-out|ease-in-out|step-start|step-end|step(<integer>, start)|step(<integer>, end)|cubic-bezier(<number>, <number>, <number>, <number>)]

• 可以在关键帧里使用animation-timing-function，并从该帧开始使用新的时序函数，直到下一个覆盖默认时序或有animation-timing-function声明的关键帧
• 在关键帧里使用的animation-timing-function只能作用于该关键帧中定义的属性上，不可改变其他属性的动画
• 具体用法可以参考transition-timing-function，文章：CSS过渡(transition)

animation-play-state

初始值：running

取值：[running|paused]

animation-fill-mode

初始值：none

取值：[none|forwards|backwards|both]

该属性可以定义触发animationstart事件之前和触发animationend事件之后动画如何影响元素，总结如下：

• 0%关键帧是否被动画延迟影响应用到元素上
  • 有影响：none、forwards
  • 无影响：backwards、both

这说明设置了backwards或both的动画开始之前，0%关键帧就已经作用到元素上

• 100%关键帧属性是否继续影响到元素上
  • 有影响：forwards、both
  • 无影响：none、backwards

这说明设置了forwards或both的动画结束之后，100%关键帧还是作用到元素上，不会回到原来的状态