CSS3----动画animation

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-

注释：Internet Explorer 9，以及更早的版本不支持

属性：

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性，除了 animation-play-state 属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。    4s	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。   如下示1	3
animation-delay	规定动画何时开始。默认是 0。  可以为负数，为跳过	3
animation-iteration-count	规定动画被播放的次数。默认是 1。 为无限： infinite	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。 反流播放：alternate	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。 已停止：paused	3
animation-fill-mode	规定对象动画时间之外的状态。 如下示2	3

animation-timing-function：如示1 

值	描述	测试
linear	动画从头到尾的速度是相同的。	测试
ease	默认。动画以低速开始，然后加快，在结束前变慢。	测试
ease-in	动画以低速开始。	测试
ease-out	动画以低速结束。	测试
ease-in-out	动画以低速开始和结束。	测试
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

animation-fill-mode： 如示2 

值	描述
none	不改变默认行为。
forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both	向前和向后填充模式都被应用。

动画名：myfirst，全写

div{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
  
-moz-animation-name: myfirst;   /* Firefox */
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
 
-webkit-animation-name: myfirst;   /* Safari 和 Chrome */
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;


-o-animation-name: myfirst;   /* Opera */
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}

动画名：myfirst，简写

div{
animation: myfirst 5s linear 2s infinite alternate;
-moz-animation: myfirst 5s linear 2s infinite alternate;    /* Firefox: */
-webkit-animation: myfirst 5s linear 2s infinite alternate; /* Safari 和 Chrome: */
-o-animation: myfirst 5s linear 2s infinite alternate;      /* Opera: */
}

@keyframes 创建规则

规定某项 CSS 样式，写法1：  注：可以按任一百分比（0%，25%，50%，75%，100%）

@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
100%  {background:blue; left:200px; top:200px;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background:red; left:0px; top:0px;}
100%  {background:blue; left:200px; top:200px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red; left:0px; top:0px;}
100%  {background:blue; left:200px; top:200px;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background:red; left:0px; top:0px;}
100%  {background:blue; left:200px; top:200px;}
}

规定某项 CSS 样式，写法2： 注：from  -  to 同等于0% -- 100%

@keyframes myfirst
{
from   {background:red; left:0px; top:0px;}
to  {background:blue; left:200px; top:200px;}
}


@-moz-keyframes myfirst /* Firefox */
{
from   {background:red; left:0px; top:0px;}
to  {background:blue; left:200px; top:200px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from   {background:red; left:0px; top:0px;}
to  {background:blue; left:200px; top:200px;}
}

@-o-keyframes myfirst /* Opera */
{
from   {background:red; left:0px; top:0px;}
to  {background:blue; left:200px; top:200px;}
}