CSS3 动画animation

[email protected]

关键帧，用来定义动画，后边跟动画名称以及动画样式

@keyframes changecolor{
  0%{
   background-color: red;
  }
  100%{
    background-color: green;
  }
}

这里的0%和100%可以由from to 来代替

2.animation-name

用于调用动画，值默认为none，不进行调用，调用动画时值为@keyframes中定义的动画名

3.animation-duration

4.animation-timing-function

5.animation-delay

6.animation-iteration-count

用于指定动画播放的次数，默认为1，可以使用整数定义，一直播放的话可以使用infinite

7.animation-direction

用于设置动画播放方向，默认值为normal，每次都是向前（0-100）播放，值设为alternate时，奇数次向反方向播放，偶数次向前播放

8.animation-play-state

用于设置动画的播放状态，取值：running（播放）、paused（暂停）

9.animation-fill-mode

用于定义动画开始之前和结束之后发生的操作
取值有四个
none，默认值，动画结束之后返回初始帧位置
forwards，动画结束之后应用最后帧的位置
backwards，动画开始之前迅速应用初始帧
both，同时具有forwards和backwards效果