您好,登錄后才能下訂單哦!
這篇文章主要介紹了css3動畫之transition和animation屬性有什么用,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
tradition一共以下有4個屬性:
transition-property 過渡屬性
transition-duration 完成動畫所需時間,以秒或者毫秒計算
transition-timing-function 規(guī)定動畫變化速度曲線
transition-delay 是否延時
transition-property 過渡屬性
none:沒有屬性會獲得過渡效果
all:所有屬性會獲得過渡效果
porperty:width,height...
img{ height:15px; width:15px; } img:hover{ height: 450px; width: 450px; }
transition的作用在于指定狀態(tài)變化所需要的時間。
img{ transition: 1s; }
transition-duration 完成狀態(tài)過渡的秒或者毫秒
還可以指定transition的變化屬性,例如是width變化還是height
img{ transition: 1s height; }
還可以指定多個屬性
img{ transition: 1s height, 1s width }
transition-delay 狀態(tài)變化速度。
指定delay參數(shù),使得height先發(fā)生變化,然后在讓width發(fā)生變化:
img{ transition: 1s height, 1s 1s width }
delay 真正的意義在于指定了動畫發(fā)生的順序,使得多個不同的transition可以在不同的時刻發(fā)生形成一種動畫效果
transition-timing-function 狀態(tài)變化速度
默認的是逐漸放慢 ease
可能取值有
linear:勻速
easy-in:加速
ease-out:減速
cubic-bezier函數(shù),自定義速度模式
(cubic:立方體的,bezier:貝塞爾曲線 )
cubic-bezier(<x1>, <y1>, <x2>, <y2>)取值范圍0-1
img{ transition-property: height; transition-duration: 1s; transition-delay: 1s; transition-timing-function: ease; }
注意:transition需要明確知道開始狀態(tài)和結(jié)束狀態(tài)的具體數(shù)值才能計算出中間狀態(tài)。但是transition沒法計算出0->auto的狀態(tài),那么就不會產(chǎn)生動畫效果。類似情況還有display:none->block和background:url(foo.jpg)->url(bar.jpg)的情況。
它有的缺點:
需要事件觸發(fā),沒法在網(wǎng)頁加載時候直接發(fā)生
是一次性的,不能重復(fù)發(fā)生,除非你重復(fù)觸發(fā)它
只能定義開始狀態(tài)和結(jié)束狀態(tài),不能定義中間狀態(tài)
一個transition規(guī)則,只能定義一個屬性的變化
animation
CSS Animation一共有以下屬性:
animation-name 需要綁定到選擇器keyframe的名稱
animation-duration 完成動畫所需時間,以秒或者毫秒計算
animation-timing-function 規(guī)定動畫的速度曲線
animaton-delay 動畫開始之前延時的時間
animation-iteration-count 動畫應(yīng)該播放的次數(shù)
animation-direction 是否應(yīng)該輪流反向播放動畫
animation-fill-mode 屬性規(guī)定動畫播放之后其動態(tài)效果是否可見
animatoin-play-state 規(guī)定動畫正在運行還是暫停
iteration-重復(fù)
animation-name
animation-duration
首先 設(shè)置動畫的名稱和持續(xù)的時長
p:hover{ animation: 1s rainbow; }
上面代碼表示,當鼠標懸停在p元素上時,會產(chǎn)生名為rainbow的動畫效果,持續(xù)時間為1秒。為此,我們還需要用keyframes關(guān)鍵字,定義rainbow效果。
@keyframs rainbow{ 0% { background: #c00; } 50% { background: orange; } 100% { background: yellowgreen; } }
keyframs的寫法相當自由
可以用from表示0%,to 表示100%
@keyframs rainbow{ from { background: #c00; } 50% { background: orange; } to { background: yellowgreen; } }
如果忽略某個狀態(tài),瀏覽器會自動推算
@keyframs rainbow{ 50% { background: orange; } to { background: yellowgreen; } } @keyframs rainbow{ to { background: yellowgreen; } } @keyframs rainbow{ from, to { background: yellowgreen; } }
瀏覽器從一個狀態(tài)到另外一個狀態(tài)是平滑過渡到,steps函數(shù)實現(xiàn)分步過渡
p:hover { animation: 1s rainbow infinite steps(10); }
默認情況下,動畫只播放一次。加入infinite關(guān)鍵字,可以讓動畫無限次播放。
p:hover{ animation: 1s rainbow infinite; }
除了infinite,還可以設(shè)置為具體的次數(shù): 3、5
p:hover{ animation: 1s rainbow 5; }
animation-fill-mode
動畫結(jié)束以后會立即沖結(jié)束狀態(tài)回到起始狀態(tài),如果想讓動畫保持在結(jié)束狀態(tài)就要加上animation-fill-mode屬性中的forwards
p:hover{ animation: 1s rainbow infinite forwards; }
animation-fill-mode 有4種取值
none 不改變默認行為
forawads 動畫完成后,保持最后一個屬性(在最后一個關(guān)鍵幀中定義)
backwards 在 animation-delay 所指定的一段時間內(nèi),在動畫顯示之前,應(yīng)用開始屬性值(在第一個關(guān)鍵幀中定義)。
both 向前向后都進行填充
animation-direction
規(guī)定了輪流反向播放動畫
alternate:動畫會在奇數(shù)次(1,3,5...)正常播放,偶數(shù)次(2,4,6...)反向播放
最常用alternate和revers,瀏覽器對其他值的支持不佳
<iframe width="100%" height="300" src="//jsfiddle.net/xiaoying/2414dr39/embedded/"> </iframe>
感謝你能夠認真閱讀完這篇文章,希望小編分享的“css3動畫之transition和animation屬性有什么用”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學習!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。