css3动画学习笔记

如需在 CSS3 中创建动画，需要学习 @keyframes 规则。

Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

 

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

 

案例：

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

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

动画参数学习：

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;
}
或者简写如下：

div
{
animation: myfirst 5s linear 2s infinite alternate;
}

（1）animation-name:动画名称

（2）animation-duration:规定动画完成一个周期所花费的秒或毫秒。默认是 0。

animation-timing-function:规定动画的速度曲线。默认是 "ease"。
animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。
linear（动画从头到尾的速度是相同的。）；
ease（默认。动画以低速开始，然后加快，在结束前变慢。）；
ease-in，ease-out，ease-in-out；
cubic-bezier(n,n,n,n)

animation-timing-function: linear; === animation-timing-function: cubic-bezier(0,0,1,1);

（3）animation-iteration-count 规定动画被播放的次数。默认是 1。

infinite（无线循环执行动画） 或者给一个实际值，比如2，动画执行两次。

（4）animation-direction 规定动画是否在下一周期逆向地播放，默认是 "normal"。
alternate

（5）animation-play-state
规定动画是否正在运行或暂停。默认是 "running"。

（6）animation-delay 规定动画何时开始
（7）animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。

兼容其他浏览器

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; /*chrome safari*/

-o-animation: myfirst 5s linear 2s infinite alternate; /*opera*/

-ms-animation: myfirst 5s linear 2s infinite alternate; /*ie9,ie9以下不支持*/

}