animation

Posted 2020-08-02

animation:<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>

animation-name:动画名称；

animation-duration:<time>.是用来指定元素播放动画所持续的时间长，取值:<time>为数值，单位为s （秒.）其默认值为“0”;

animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier.动画的播放方式和transition中的transition-timing-function一样

animation-delay：<time>.animation-delay:是用来指定元素动画开始时间。取值为<time>为数值，单位为s(秒)，其默认值也是0

<animation-iteration-count> animation-iteration-count是用来指定元素播放动画的循环次数，其可以取值<number>为数字，其默认值为“1”；infinite为无限次数循环。

animation-direction是用来指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

 

keyframes:我们叫做关键帧，要第一个时间段执行什么动作，第二个时间段执行什么动作（换到flash中说，就是第一帧我要执行什么动作，第二帧我要执行什么动作），这样我们用Transition就很难实现了，此时我们也需要这样的一个“关键帧”来控制。

@keyframes IDENT {
      0% {
         Properties:Properties value;
      }
      Percentage {
         Properties:Properties value;
      }
      100% {
         Properties:Properties value;
      }
    }

其中IDENT是一个动画名称，你可以随便取，当然语义化一点更好，Percentage是百分比值，我们可以添加许多个这样的百分比，Properties为css的属性名，比如说left,background等，value就是相对应的属性的属性值。值得一提的是，我们from和to 分别对应的是0%和100%。这个我们在前面也提到过了。到目前为止支技animation动画的只有webkit内核的浏览器，所以我需要在上面的基础上加上-webkit前缀，据说Firefox5可以支持css3的 animation动画属性。