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>

實現的效果就是從上下左右各個方向的動態箭頭，通常用於提醒用戶能夠向下或者向上拖動。