CSS动画(animation)

2021-10-02 07:31:36 阅读：186 来源： 互联网

简写属性

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或to或百分数（不可以为[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

可以在关键帧里使用animation-timing-function，并从该帧开始使用新的时序函数，直到下一个覆盖默认时序或有animation-timing-function声明的关键帧
在关键帧里使用的animation-timing-function只能作用于该关键帧中定义的属性上，不可改变其他属性的动画

animation-play-state

初始值：running

取值：[running|paused]

animation-fill-mode