CSS3 Animation 动画

CSS3 Animation 动画

1. @keyframes
   其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。

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

1. 调用

animation: name duration timing-function delay iteration-count direction;

  animation-name:redToBlue; //name
  animation-duration: 20s;  //定义动画执行时间
  animation-timing-function: ease;  //定义动画执行方式，ease为先慢中快后慢。
  animation-delay: 1s;  //定义出发后多少时间执行动画
  animation-iteration-count: infinite; //定义动画执行几次。infinite为一直循环执行。
  animation-direction:alternate;  //alternate作用：动画播放在第偶数次向前播放，第奇数次向反方向播放。还有一个指是normal

  animation-fill-mode: both; //定义动画执行完后，保持在那一帧上。