|
通過CSS3 可以創(chuàng)建動畫，它可以取代許多網(wǎng)頁動畫圖像、Flash 動畫以及 JavaScript 實(shí)現(xiàn)的效果。要創(chuàng)建 CSS3 動畫，需要學(xué)習(xí) @keyframes 規(guī)則。 @keyframes 規(guī)則是創(chuàng)建動畫。 @keyframes 規(guī)則內(nèi)指定某個 CSS 樣式就能從目前的樣式更改為新樣式的動畫效果。 注意：Internet Explorer 9，以及更早的版本，不支持 @keyframe 規(guī)則或 animation 屬性。Chrome 和 Safari 需要前綴 -webkit-。 在 @keyframes 創(chuàng)建動畫時(shí)，需要把它綁定到某個選擇器，否則動畫就不會有任何效果。指定至少兩個CSS3的動畫屬性就可以綁定到選擇器： 規(guī)定動畫的名稱 規(guī)定動畫的時(shí)長 示例：把 "myfirst" 動畫捆綁到html的 div 元素，時(shí)長：5 秒： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
</style>
<p><b>注意:</b> 該實(shí)例在 Internet Explorer 9 及更早 IE 版本是無效的。</p>
<div></div>
|
2，當(dāng)動畫為 25% 及 50% 時(shí)改變背景色，然后當(dāng)動畫 100% 完成時(shí)再次改變： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <style>
div
{
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
{
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 and 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;}
}
</style>
<div></div>
<p><b>注釋：</b>當(dāng)動畫完成時(shí)，會變回初始的樣式。</p>
<p><b>注意:</b> 該實(shí)例在 Internet Explorer 9 及更早 IE 版本是無效的。</p>
|
以上兩個例子代碼可以嘗試一下 CSS3的動畫屬性
|
