animation动画的笔记

animation的主要语法：

-webkit-animation-duration:/*-webkit是针对个别浏览器内核支持，duration是动画时间*/

-webkit-animation-timing-function:/*用来定义动画频率*/

-webkit-animation-name:/*定义动画名称*/

-webkit-animation-delay:2s/*定义动画延迟时间,单位为s*/

-webkit-animation-iteration-count:/*定义循环资料，如infinite是无限循环*/

-webkit-animation-direction:alternate/*定义动画方式*/

　　　CSS Animation动画效果将会影响元素相对应的css值，在整个动画过程中，元素的变化属性值完全是由animation来控制，动画后面的会覆盖前面的属性值，当动画结束后，样式回到默认效果。（我们可以同时附几个animation给一个元素，我们只需要用逗号“，”隔开。）

　　例子：

<style>

.classname{

width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */

}

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}</style>