CSS3实现动画

CSS3实现一个简单的动画

可以改变任意多的样式任意多的次数，用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成，为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：

HTML代码：

<div>
<span class="span" id="span1" style="font-size:100px;font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu">
&gt;</span>
<span id="span2" class="span" style="font-size:100px;font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu">
&lt;</span>
<span id="span3" class="span" style="font-size:100px;font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu">
&and;</span>
<span id="span4" class="span" style="font-size:100px;font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu">
&or;</span>
</div>

CSS3代码：

<style>
.span{
position:relative;
animation-duration:2s;			/*规定动画完成一个周期所花费的秒或毫秒。默认是 0。*/
animation-timing-function:linear;	/*规定动画的速度曲线。默认是 "ease"*/
animation-delay:0;				/*规定动画何时开始。默认是 0。*/
animation-iteration-count:infinite;	/*规定动画被播放的次数。默认是 1。*/
animation-direction:alternate;             /* 规定动画是否在下一周期逆向地播放。默认是 "normal"*/
animation-play-state:running;		/*规定动画是否正在运行或暂停。默认是 "running"。*/
/* Safari and Chrome: */
-webkit-animation-duration:2s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}
#span1
{
top:100px;
left:300px;
color:#009999;
position:relative;
animation-name:myfirst1;
/* Safari and Chrome: */
-webkit-animation-name:myfirst1;
}

@keyframes myfirst1
{
from   {color:#009999 ; left:300px; top:100px;}
to  {color:#ffffff; left:320px; top:100px;}
}

@-webkit-keyframes myfirst1 /* Safari and Chrome */
{
from {color:#009999 ; left:300px; top:100px;}
to  {color:#ffffff; left:320px; top:100px;}
}
#span2
{
top:100px;
left:120px;
color:#009999;
position:relative;
animation-name:myfirst2;
/* Safari and Chrome: */
-webkit-animation-name:myfirst2;
}
@keyframes myfirst2
{
from   {color:#009999 ; left:120px; top:100px;}
to  {color:#ffffff; left:100px; top:100px;}
}
@-webkit-keyframes myfirst2 /* Safari and Chrome */
{
from {color:#009999 ; left:100px; top:100px;}
to  {color:#ffffff; left:80px; top:100px;}
}
#span3
{
top:50px;
left:100px;
color:#009999;
position:relative;
animation-name:myfirst3;
/* Safari and Chrome: */
-webkit-animation-name:myfirst3;
}
@keyframes myfirst3
{
from   {color:#009999 ; left:100px; top:50px;}
to  {color:#ffffff; left:100px; top:30px;}
}
@-webkit-keyframes myfirst3 /* Safari and Chrome */
{
from {color:#009999 ; left:90px; top:50px;}
to  {color:#ffffff; left:90px; top:50px;}
}
#span4
{
top:150px;
left:0px;
color:#009999;
position:relative;
animation-name:myfirst4;
/* Safari and Chrome: */
-webkit-animation-name:myfirst4;
}
@keyframes myfirst4
{
from   {color:#009999 ; left:0px; top:150px;}
to  {color:#ffffff; left:0px; top:170px;}
}
@-webkit-keyframes myfirst4 /* Safari and Chrome */
{
from {color:#009999 ; left:130px; top:150px;}
to  {color:#ffffff; left:130px; top:170px;}
}
</style>

实现的效果就是从上下左右各个方向的动态箭头，一般用于提醒用户可以向下或者向上拖动。