css动画

<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
animation-iteration-count:1;
animation-fill-mode:forwards 
}

@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>

animation-name   规定需要绑定到选择器的 keyframe 名称。

animation-duration 规定完成动画所花费的时间，以秒或毫秒计。

animation-timing-function 规定动画的速度曲线。

语法

animation-timing-function: value;

animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值：

linear 动画从头到尾的速度是相同的。

ease  默认。动画以低速开始，然后加快，在结束前变慢。

ease-in  动画以低速开始。

ease-out 动画以低速结束。

ease-in-out  动画以低速开始和结束。

cubic-bezier(n,n,n,n)  在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

提示：请试着在下面的“亲自试一试”功能中使用不同的值。

div
{
animation-timing-function:2s;
-webkit-animation-timing-function:2s; /* Safari 和 Chrome */
}

http://www.w3school.com.cn/cssref/pr_animation-timing-function.asp

animation-delay 规定在动画开始之前的延迟。

语法

animation-delay: time;

time  可选。定义动画开始前等待的时间，以秒或毫秒计。默认值是 0。

div
{
animation-delay:2s;
-webkit-animation-delay:2s; /* Safari 和 Chrome */
}

 

animation-iteration-count 规定动画应该播放的次数。

语法

animation-iteration-count: n|infinite;

n   定义动画播放次数的数值。
infinite   规定动画应该无限次播放。

div
{
animation-iteration-count:3;
-webkit-animation-iteration-count:3; /* Safari 和 Chrome */
}

 

animation-direction 规定是否应该轮流反向播放动画。

语法

animation-direction: normal|alternate;

normal  默认值。动画应该正常播放。
alternate  动画应该轮流反向播放。

div
{
animation-direction:alternate;
-webkit-animation-direction:alternate; /* Safari 和 Chrome */
}

animation-fill-mode 是否改变默认行为

animation-fill-mode : none | forwards | backwards | both;

none：不改变默认行为。    

forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。    

backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。   

both：向前和向后填充模式都被应用。   

 

CSS animation-play-state 属性  暂停动画

div
{
animation-play-state:paused;
-webkit-animation-play-state:paused; /* Safari 和 Chrome */
}

 

 

 css3 Transition动画执行时有可能会出现闪烁的bug

 

 

 

css3 Transition动画执行时有可能会出现闪烁的bug，一般出现在开始的时候或结束的时候。

解决方法如下：
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;

需要应用在动画元素上即可
估计是Chrome在初始渲染CSS动画时产生的Bug

 

 

 

让css animation 动画停在最后一帧

 

animation-fill-mode用来定义元素在动画结束后的样子。

animation-fill-mode：的默认值是 none，也就是在动画结束之后不做任何改动    forwards：停在最后一帧

例子：css3 animation  

 

 

监视动画结束

var tt = document.querySelector('#bannas');
            tt.addEventListener("webkitAnimationEnd",function(elems){
               
                console.log('anination is End');
                
            }, false)