|
Animation
動(dòng)畫是CSS 3最有用的地方。你可以將我們?cè)谏厦嬗懻摰乃械脑嘏c動(dòng)畫屬性比如animation-duration、animation-name 和animation-timing-function整合以創(chuàng)建像Flash動(dòng)畫一樣的效果——純CSS。
#rotate {
margin: 0 auto;
width: 600px;
height: 400px;
/* 確保我們是在一個(gè) 3-D 空間 */
-webkit-transform-style: preserve-3d;
/*讓整個(gè)行使用x-軸旋轉(zhuǎn)、7秒中的動(dòng)畫、無限次播放以及線性 */
-webkit-animation-name: x-spin;
-webkit-animation-duration: 7s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
/* 定義要調(diào)用的動(dòng)畫 */
@-webkit-keyframes x-spin {
0% { -webkit-transform: rotateX(0deg); }
50% { -webkit-transform: rotateX(180deg); }
100% { -webkit-transform: rotateX(360deg); }
}
這個(gè)夢(mèng)幻的CSS動(dòng)畫代碼和在線演示可以在 webkit 網(wǎng)站看到。該演示可以在任何網(wǎng)站看到，但是動(dòng)畫效果卻只能在Mac os(雪豹)的 WebKit的nightly build版本 可見。它看起來就像上面的視頻中的一樣，如果你是在用mac os (雪豹版本)，我認(rèn)為安裝一個(gè)webkit以親眼看看這個(gè)效果是很值得的(它真的很酷)。Windows系統(tǒng)用戶暫時(shí)無法欣賞這個(gè)效果。
animation的一些參數(shù)
- animation的參數(shù)和translate有些像，所以如果你理解了translate的參數(shù)，這里就不難理解了。
- animation-name
動(dòng)畫的名稱。
- animation-duration
定義動(dòng)畫播放一次需要的時(shí)間。默認(rèn)為0；
- animation-timing-function
定義動(dòng)畫播放的方式，參數(shù)設(shè)置類似transition-timing-function
- animation-delay
定義動(dòng)畫開始的時(shí)間
- animation-iteration-count
定義循環(huán)的次數(shù)，infinite即為無限次。默認(rèn)是1。
- -webkit-animation-direction
動(dòng)畫播放的方向，兩個(gè)值，默認(rèn)為normal，這個(gè)時(shí)候動(dòng)畫的每次循環(huán)都向前播放。另一個(gè)值是alternate，則第偶數(shù)次向前播放，第奇數(shù)次向反方向播放。
瀏覽器支持
不幸的是，目前，只有少數(shù)瀏覽器支持CSS動(dòng)畫。2D CSS animations 可以在Safari 4 (Leopard)、Chrome 3、Safari Mobile、Shira 以及其它Webkit 瀏覽器中工作。Safari 4 (Snow Leopard)支持3D動(dòng)畫。
出處：前端觀察
責(zé)任編輯：bluehearts
上一頁 你需要知道的CSS3動(dòng)畫技術(shù) [5] 下一頁 你需要知道的CSS3動(dòng)畫技術(shù) [7]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 6 頁 你需要知道的CSS3動(dòng)畫技術(shù) [6]
