css3-animation动画

CSS3 动画

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：
  1.  规定动画的名称
   2. 规定动画的时长

取值：

<' animation-name '>：检索或设置对象所应用的动画名称

<' animation-duration '>：检索或设置对象动画的持续时间
<' animation-timing-function '>：检索或设置对象动画的过渡类型
<' animation-delay '>：检索或设置对象动画延迟的时间
<' animation-iteration-count '>：检索或设置对象动画的循环次数
<' animation-direction '>：检索或设置对象动画在循环中是否反向运动
<' animation-fill-mode '>：检索或设置对象动画时间之外的状态
应用：
/*可以这么用*/
      animation:animations 2s ease-out forwards;
      animation:animations3 2s ease-out 2s forwards;
      animation:animations2 5s ease-in-out 4s forwards;
/*例子*/
@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}