中文字幕一区二区人妻电影,亚洲av无码一区二区乱子伦as ,亚洲精品无码永久在线观看,亚洲成aⅴ人片久青草影院按摩,亚洲黑人巨大videos

上一篇：CSS3 過(guò)渡 下一篇：AngularJS 簡(jiǎn)介

CSS3 動(dòng)畫

CSS3 動(dòng)畫

CSS3 可以創(chuàng)建動(dòng)畫，它可以取代許多網(wǎng)頁(yè)動(dòng)畫圖像、Flash 動(dòng)畫和 JavaScript 實(shí)現(xiàn)的效果。

CSS3
動(dòng)畫

CSS3 @keyframes 規(guī)則

要?jiǎng)?chuàng)建 CSS3 動(dòng)畫，你需要了解 @keyframes 規(guī)則。

@keyframes 規(guī)則是創(chuàng)建動(dòng)畫。

@keyframes 規(guī)則內(nèi)指定一個(gè) CSS 樣式和動(dòng)畫將逐步從目前的樣式更改為新的樣式。

瀏覽器支持

表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號(hào)。

緊跟在 -webkit-, -ms- 或 -moz- 前的數(shù)字為支持該前綴屬性的第一個(gè)瀏覽器版本號(hào)。

屬性
@keyframes 43.0
4.0?-webkit-		 10.0 16.0
5.0?-moz-		 9.0
4.0?-webkit-		 30.0
15.0?-webkit-
12.0 -o-
animation 43.0
4.0?-webkit-		 10.0 16.0
5.0?-moz-		 9.0
4.0?-webkit-		 30.0
15.0?-webkit-
12.0?-o-
OperaSafariChromeFirefoxInternet Explorer

實(shí)例

@keyframes myfirst { from {background: red;} to {background: yellow;} } @-webkit-keyframes myfirst /* Safari 與 Chrome */ { from {background: red;} to {background: yellow;} }

CSS3 動(dòng)畫

當(dāng)在 @keyframes 創(chuàng)建動(dòng)畫，把它綁定到一個(gè)選擇器，否則動(dòng)畫不會(huì)有任何效果。

指定至少這兩個(gè)CSS3的動(dòng)畫屬性綁定向一個(gè)選擇器：

  • 規(guī)定動(dòng)畫的名稱
  • 規(guī)定動(dòng)畫的時(shí)長(zhǎng)
OperaSafariChromeFirefoxInternet Explorer

實(shí)例

把 "myfirst" 動(dòng)畫捆綁到 div 元素，時(shí)長(zhǎng)：5 秒：

div { animation: myfirst 5s; -webkit-animation: myfirst 5s; /* Safari 與 Chrome */ }

運(yùn)行代碼 ?

注意: 您必須定義動(dòng)畫的名稱和動(dòng)畫的持續(xù)時(shí)間。如果省略的持續(xù)時(shí)間，動(dòng)畫將無(wú)法運(yùn)行，因?yàn)槟J(rèn)值是0。

CSS3動(dòng)畫是什么？

動(dòng)畫是使元素從一種樣式逐漸變化為另一種樣式的效果。

您可以改變?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)。

請(qǐng)用百分比來(lái)規(guī)定變化發(fā)生的時(shí)間，或用關(guān)鍵詞 "from" 和 "to"，等同于 0% 和 100%。

0% 是動(dòng)畫的開(kāi)始，100% 是動(dòng)畫的完成。

為了得到最佳的瀏覽器支持，您應(yīng)該始終定義 0% 和 100% 選擇器。

OperaSafariChromeFirefoxInternet Explorer

實(shí)例

當(dāng)動(dòng)畫為 25% 及 50% 時(shí)改變背景色，然后當(dāng)動(dòng)畫 100% 完成時(shí)再次改變：

@keyframes myfirst { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } @-webkit-keyframes myfirst /* Safari 與 Chrome */ { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} }

運(yùn)行代碼 ?
OperaSafariChromeFirefoxInternet Explorer

實(shí)例

改變背景色和位置：

@keyframes myfirst { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} } @-webkit-keyframes myfirst /* Safari 與 Chrome */ { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} }

運(yùn)行代碼 ?

CSS3的動(dòng)畫屬性

下面的表格列出了 @keyframes 規(guī)則和所有動(dòng)畫屬性：

屬性 描述 CSS
@keyframes 規(guī)定動(dòng)畫。 3
animation 所有動(dòng)畫屬性的簡(jiǎn)寫屬性，除了 animation-play-state 屬性。 3
animation-name 規(guī)定 @keyframes 動(dòng)畫的名稱。 3
animation-duration 規(guī)定動(dòng)畫完成一個(gè)周期所花費(fèi)的秒或毫秒。默認(rèn)是 0。 3
animation-timing-function 規(guī)定動(dòng)畫的速度曲線。默認(rèn)是 "ease"。 3
animation-fill-mode 規(guī)定當(dāng)動(dòng)畫不播放時(shí)（當(dāng)動(dòng)畫完成時(shí)，或當(dāng)動(dòng)畫有一個(gè)延遲未開(kāi)始播放時(shí)），要應(yīng)用到元素的樣式。 3
animation-delay 規(guī)定動(dòng)畫何時(shí)開(kāi)始。默認(rèn)是 0。 3
animation-iteration-count 規(guī)定動(dòng)畫被播放的次數(shù)。默認(rèn)是 1。 3
animation-direction 規(guī)定動(dòng)畫是否在下一周期逆向地播放。默認(rèn)是 "normal"。 3
animation-play-state 規(guī)定動(dòng)畫是否正在運(yùn)行或暫停。默認(rèn)是 "running"。 3

下面兩個(gè)例子設(shè)置所有動(dòng)畫屬性：

OperaSafariChromeFirefoxInternet Explorer

實(shí)例

運(yùn)行myfirst動(dòng)畫，設(shè)置所有的屬性：

div { animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; /* Safari 與 Chrome: */ -webkit-animation-name: myfirst; -webkit-animation-duration: 5s; -webkit-animation-timing-function: linear; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-play-state: running; }

運(yùn)行代碼 ?
OperaSafariChromeFirefoxInternet Explorer

實(shí)例

與上面的動(dòng)畫相同，但是使用了簡(jiǎn)寫的動(dòng)畫 animation 屬性：

div { animation: myfirst 5s linear 2s infinite alternate; /* Safari 與 Chrome: */ -webkit-animation: myfirst 5s linear 2s infinite alternate; }

運(yùn)行代碼 ?
其他擴(kuò)展
上一篇：CSS3 過(guò)渡 下一篇：AngularJS 簡(jiǎn)介