CSS3动画—-@keyframes 规则

用到的CSS3如下所示

@-webkit-keyframes le01{0%{top:591px; opacity:0.9;} 50%{top:331px;} 100%{top:391px; opacity:1;}}
 @-webkit-keyframes le02{from{top:520px;-webkit-transform: rotate(-180deg);} to{top:361px;-webkit-transform: rotate(360deg);}}
 @-webkit-keyframes la01{
 0%{
 background: #27bc9c;
 opacity: .5;
 }
 50%{
 opacity: 1;
 }
 100%{
 background: #f77;
 }
 }
 @-webkit-keyframes la02{
 from{
 opacity: .3;
 width: 100px;
 height: 100px;
 }
 to{
 opacity: 1;
 width: 200px;
 height: 100px;
 }
 }
 .d1{-webkit-animation: le01 2.5s 0.6s ease-out alternate, le02 1.3s 3.1s ease-in-out infinite alternate;position: absolute;}
 .d2{-webkit-animation: la01 2.5s 0.6s ease-out alternate,la02 1.3s 3.1s ease-in-out infinite alternate;}

@-webkit-keyframes le01
“le01″：动画的命名

然后用  x%  或者 from、to来定义动漫的各个阶段。其中%可以定义多段，例如0%、10%、20%等

（le01和la01本质是一样的，只不过我la01没有缩写到一行上去）

动画属性解释

比如我们可以在0%设置DIV宽高为100，50%时候改变宽高为200，然后100%时设置透明度为0,、宽高为0。然后全局动画用时为3秒

这样就能得到一个“一个正方形3秒内从小变大然后变小消失的简单CSS3动画”

（记得设置动画进行的时间）

调用动画

例如给div.d1加上一个已经定义好的动画 la01

那么只需要

.d1{-webkit-animation: la01 2.5s 0.6s ease-out infinite alternate;}

其中 2.5s 为动画运行时间， 0.6s为页面打开0.6秒以后开始运行动画（如果0.6改成6就是说页面打开后等待3秒动画才能进行）

infinite  无限循环。

也可以向例子那样设置多个动画，前后用“,”（逗号）隔开。最终现实多个不同的动画的切换和循环。

未经允许不得转载：安超峰的网站 » CSS3动画—-@keyframes 规则