這篇文章主要為大家展示了“css3中的動(dòng)畫屬性有哪些”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“css3中的動(dòng)畫屬性有哪些”這篇文章吧。

成都創(chuàng)新互聯(lián)主要從事成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)林口,十余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

css3的動(dòng)畫屬性

1、animation-name屬性

animation-name屬性：定義動(dòng)畫名稱，用于指定由規(guī)則定義的動(dòng)畫的一個(gè)或多個(gè)名稱。

注：animation-name屬性必須與規(guī)則@keyframes配合使用，因?yàn)閯?dòng)畫名稱是由@keyframes定義聲明的，如果提供多個(gè)屬性值用逗號(hào)隔開。

@keyframes規(guī)則相當(dāng)于一個(gè)命名空間，后面跟一個(gè)名詞，如果在class中的animation-name定義了與之對(duì)應(yīng)的name就可以執(zhí)行動(dòng)畫。

2、animation-duration屬性

animation-duration屬性用于指定執(zhí)行一個(gè)周期動(dòng)畫應(yīng)該花多長時(shí)間。

時(shí)間以秒或毫秒指定，并且最初設(shè)置為“0”，這意味著動(dòng)畫即時(shí)發(fā)生；我們可以指定一個(gè)持續(xù)時(shí)間或多個(gè)以逗號(hào)分隔的持續(xù)時(shí)間。

3、animation-timing-function屬性

animation-timing-function屬性是用來設(shè)置播放方式的，它可以指定定時(shí)函數(shù)，該函數(shù)定義動(dòng)畫對(duì)象隨時(shí)間的速度。它描述了動(dòng)畫在其持續(xù)時(shí)間的一個(gè)周期內(nèi)如何進(jìn)展，允許它在其過程中改變速度。

取值如下：

ease：緩解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函數(shù)，既立方貝塞爾。

linear：線性效果，速度將從開始到結(jié)束穩(wěn)定。

ease-in：漸顯效果，動(dòng)畫將緩慢啟動(dòng)，然后獲得更多加速并穩(wěn)定到持續(xù)時(shí)間結(jié)束。

ease-out：漸隱效果，動(dòng)畫將快速啟動(dòng)，然后減速并穩(wěn)定到持續(xù)時(shí)間結(jié)束。

ease-in-out：漸顯漸隱效果，它是組合了ease-in和ease-out。動(dòng)畫或過渡將開始緩慢，在中間加速，然后減速直至結(jié)束。

step-start：馬上跳轉(zhuǎn)到動(dòng)畫結(jié)束狀態(tài)，動(dòng)畫或過渡將突然變?yōu)榻Y(jié)束狀態(tài)并保持在該位置直到動(dòng)畫結(jié)束。

step-end：動(dòng)畫或過渡保持其開始狀態(tài)，直到動(dòng)畫執(zhí)行結(jié)束，直接跳轉(zhuǎn)到其動(dòng)畫結(jié)束狀態(tài)。

step(<number>[,[start|end]])：

step()可以將轉(zhuǎn)換的持續(xù)時(shí)間劃分為相等大小的間隔；或指定輸出百分比的變化是發(fā)生在間隔的開始還是結(jié)束。

第一個(gè)參數(shù)number為指定的間隔數(shù)，即把動(dòng)畫分為n步階段性顯示，第二個(gè)參數(shù)默認(rèn)為end，設(shè)置最后一步狀態(tài)，start為結(jié)束時(shí)的狀態(tài)，end為開始時(shí)的狀態(tài)，若設(shè)置與animation-fill-mode的效果沖突，以animation-fill-mode的設(shè)置為動(dòng)畫結(jié)束狀態(tài)。

1.png

cubic-bezier(,,,)：特殊的立方賽貝爾曲線效果

4、animation-delay屬性

animation-delay屬性：定義動(dòng)畫何時(shí)開始（開始時(shí)間），它允許動(dòng)畫在應(yīng)用后的某個(gè)時(shí)間開始執(zhí)行，或者在應(yīng)用之前看似已經(jīng)開始執(zhí)行一段時(shí)間。

初始值為“0”，這意味著動(dòng)畫將在應(yīng)用于元素后立即開始播放。正時(shí)間值表示偏移量，該偏移量定義動(dòng)畫開始之間（通過動(dòng)畫屬性將動(dòng)畫應(yīng)用于元素時(shí)）與開始執(zhí)行時(shí)的延遲時(shí)間。

我們還可以為animation-delay提供負(fù)值。負(fù)值，就像'0'一樣，意味著動(dòng)畫一旦被應(yīng)用，就會(huì)立即執(zhí)行，但是由延遲的絕對(duì)值自動(dòng)推進(jìn)，就好像動(dòng)畫在過去已經(jīng)啟動(dòng)了指定的時(shí)間，并且它似乎已經(jīng)在其游戲周期的中途開始了。例如，如果為animation-delay提供“-2S”的值，動(dòng)畫將立即啟動(dòng)，只要它被應(yīng)用，但它將顯示為它已經(jīng)啟動(dòng)2s之前，你已經(jīng)應(yīng)用它。

5、animation-iteration-count屬性

animation-iteration-count屬性：用于指定動(dòng)畫停止前播放動(dòng)畫循環(huán)的次數(shù)，即：播放次數(shù)。

初始值為“1”，表示動(dòng)畫將從頭到尾播放一次；通常會(huì)取“infinite”值，表示無限循環(huán)播放。

6、animation-direction屬性

animation-direction屬性：用于指定動(dòng)畫是否應(yīng)在某些或所有循環(huán)或迭代中反向播放，即：播放方向。

該屬性可能取的值：

normal：正常方向

reverse：動(dòng)畫反向運(yùn)行，方向始終與normal相仿

alternate：動(dòng)畫會(huì)循環(huán)正反交替運(yùn)動(dòng)

7、animation-fill-mode屬性

animation-fill-mode屬性定義動(dòng)畫在播放后的狀態(tài)。更具體地說，它定義了在動(dòng)畫延遲時(shí)間內(nèi)以及動(dòng)畫完成執(zhí)行后應(yīng)用于元素的樣式。

該屬性可能取的值：

none：默認(rèn)值，不設(shè)置樣式

forwards：結(jié)束后保持動(dòng)畫結(jié)束的狀態(tài)

backwards：結(jié)束后返回動(dòng)畫開始時(shí)狀態(tài)

both：結(jié)束后可遵循forwards和backwards兩個(gè)規(guī)則

8、animation-play-state屬性

animation-play-state屬性：用于檢索或設(shè)置對(duì)象動(dòng)畫的狀態(tài)，即：指定CSS動(dòng)畫是正在運(yùn)行還是暫停。

該屬性可能取的值：

running：默認(rèn)值，運(yùn)動(dòng)；

paused：暫停。

我們也可以使用動(dòng)畫的簡(jiǎn)寫屬性animation屬性來一次性設(shè)置動(dòng)畫的樣式：

/*一個(gè)動(dòng)畫定義的語法*/

animation:[animation-name][animation-duration][animation-timing-function][animation-delay][animation-iteration-count][animation-direction][animation-fill-mode][animation-play-state];

/*兩個(gè)動(dòng)畫定義，用逗號(hào)隔開*/

animation：animation:[animation-name][animation-duration][animation-timing-function][animation-delay][animation-iteration-count][animation-direction][animation-fill-mode][animation-play-state],

[animation-name][animation-duration][animation-timing-function][animation-delay][animation-iteration-count][animation-direction][animation-fill-mode][animation-play-state];

css3動(dòng)畫屬性和@keyframes規(guī)則創(chuàng)建簡(jiǎn)單動(dòng)畫：

代碼實(shí)例：

HTML代碼：

<divclass="container">

<pclass="text">

php中文網(wǎng)

</p>

</div>

css代碼：

@importurl(http://fonts.googleapis.com/css?family=Gentium+Basic:400,700,400italic,700italic);

body{

background-color:#F5F5F5;

color:#555;

font-size:1.1em;

font-family:'GentiumBasic',serif;

}

.container{

margin:50pxauto;

max-width:700px;

}

.text{

font-size:3em;

font-weight:bold;

color:#009966;

-webkit-transform-origin:leftcenter;

-ms-transform-origin:leftcenter;

transform-origin:leftcenter;

-webkit-animation:fall4sinfinite;

animation:fall4sinfinite;

}

@-webkit-keyframesfall{

from,15%{

-webkit-transform:rotate(0)translateX(0);

transform:rotate(0)translateX(0);

opacity:1;

-webkit-animation-timing-function:cubic-bezier(.07,2.02,.67,.57);

animation-timing-function:cubic-bezier(.07,2.02,.67,.57);

}

50%,60%{

-webkit-transform:rotate(90deg)translateX(0);

transform:rotate(90deg)translateX(0);

opacity:1;

-webkit-animation-timing-function:cubic-bezier(.13,.84,.82,1);

animation-timing-function:cubic-bezier(.13,.84,.82,1);

}

85%,to{

-webkit-transform:rotate(90deg)translateX(200px);

transform:rotate(90deg)translateX(200px);

opacity:0;

}

}

@keyframesfall{

from,15%{

-webkit-transform:rotate(0)translateX(0);

transform:rotate(0)translateX(0);

opacity:1;

-webkit-animation-timing-function:cubic-bezier(.07,2.02,.67,.57);

animation-timing-function:cubic-bezier(.07,2.02,.67,.57);

}

50%,60%{

-webkit-transform:rotate(90deg)translateX(0);

transform:rotate(90deg)translateX(0);

opacity:1;

-webkit-animation-timing-function:cubic-bezier(.13,.84,.82,1);

animation-timing-function:cubic-bezier(.13,.84,.82,1);

}

85%,to{

-webkit-transform:rotate(90deg)translateX(200px);

transform:rotate(90deg)translateX(200px);

opacity:0;

}

}

以上是“css3中的動(dòng)畫屬性有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁題目：css3中的動(dòng)畫屬性有哪些
文章來源：http://sd-ha.com/article10/jocpgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、定制網(wǎng)站、App設(shè)計(jì)、網(wǎng)站排名、定制開發(fā)、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)