您好,登錄后才能下訂單哦!
小編給大家分享一下css3動(dòng)畫屬性是什么,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
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è)屬性值用逗號隔開。
@keyframes規(guī)則相當(dāng)于一個(gè)命名空間,后面跟一個(gè)名詞,如果在class中的animation-name定義了與之對應(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è)以逗號分隔的持續(xù)時(shí)間。
3、animation-timing-function屬性
animation-timing-function屬性是用來設(shè)置播放方式的,它可以指定定時(shí)函數(shù),該函數(shù)定義動(dòng)畫對象隨時(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)。
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í)行,但是由延遲的絕對值自動(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è)置對象動(dòng)畫的狀態(tài),即:指定CSS 動(dòng)畫是正在運(yùn)行還是暫停。
該屬性可能取的值:
running:默認(rèn)值,運(yùn)動(dòng);
paused:暫停。
我們也可以使用動(dòng)畫的簡寫屬性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)畫定義,用逗號隔開* / 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)建簡單動(dòng)畫:
代碼實(shí)例:
HTML代碼:
<div class="container"> <p class="text"> php </p> </div>
css代碼:
@import url(http://fonts.googleapis.com/css?family=Gentium+Basic:400,700,400italic,700italic); body { background-color: #F5F5F5; color: #555; font-size: 1.1em; font-family: 'Gentium Basic', serif; } .container { margin: 50px auto; max-width: 700px; } .text { font-size: 3em; font-weight: bold; color: #009966; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-animation: fall 4s infinite; animation: fall 4s infinite; } @-webkit-keyframes fall { 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; } } @keyframes fall { 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)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。