這篇文章主要介紹了css3動畫之transition和animation屬性有什么用，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯公司專注于企業(yè)網絡營銷推廣、網站重做改版、湘潭縣網站定制設計、自適應品牌網站建設、H5高端網站建設、電子商務商城網站建設、集團公司官網建設、成都外貿網站制作、高端網站制作、響應式網頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為湘潭縣等各大城市提供網站開發(fā)制作服務。

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參數，使得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函數，自定義速度模式

（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)和結束狀態(tài)的具體數值才能計算出中間狀態(tài)。但是transition沒法計算出0->auto的狀態(tài)，那么就不會產生動畫效果。類似情況還有display：none->block和background:url(foo.jpg)->url(bar.jpg)的情況。

它有的缺點：

1. 需要事件觸發(fā)，沒法在網頁加載時候直接發(fā)生

2. 是一次性的，不能重復發(fā)生，除非你重復觸發(fā)它

3. 只能定義開始狀態(tài)和結束狀態(tài)，不能定義中間狀態(tài)

4. 一個transition規(guī)則，只能定義一個屬性的變化

animation

CSS Animation一共有以下屬性：

• animation-name 需要綁定到選擇器keyframe的名稱

• animation-duration  完成動畫所需時間，以秒或者毫秒計算

• animation-timing-function 規(guī)定動畫的速度曲線

• animaton-delay  動畫開始之前延時的時間

• animation-iteration-count  動畫應該播放的次數

• animation-direction 是否應該輪流反向播放動畫

• animation-fill-mode 屬性規(guī)定動畫播放之后其動態(tài)效果是否可見

• animatoin-play-state 規(guī)定動畫正在運行還是暫停

iteration-重復

animation-name

animation-duration

首先 設置動畫的名稱和持續(xù)的時長

p:hover{
animation: 1s rainbow;
}

上面代碼表示，當鼠標懸停在p元素上時，會產生名為rainbow的動畫效果，持續(xù)時間為1秒。為此，我們還需要用keyframes關鍵字，定義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函數實現分步過渡

p:hover {
animation: 1s rainbow infinite steps(10);
}

默認情況下，動畫只播放一次。加入infinite關鍵字，可以讓動畫無限次播放。

p:hover{
animation: 1s rainbow infinite;
}

除了infinite，還可以設置為具體的次數： 3、5

p:hover{
animation: 1s rainbow 5;
}

animation-fill-mode

動畫結束以后會立即沖結束狀態(tài)回到起始狀態(tài)，如果想讓動畫保持在結束狀態(tài)就要加上animation-fill-mode屬性中的forwards

p:hover{
animation: 1s rainbow infinite forwards;
}

animation-fill-mode 有4種取值

none  不改變默認行為

forawads  動畫完成后，保持最后一個屬性（在最后一個關鍵幀中定義）

backwards  在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。

both  向前向后都進行填充

animation-direction

規(guī)定了輪流反向播放動畫

alternate：動畫會在奇數次（1，3，5...）正常播放，偶數次（2,4,6...）反向播放

最常用alternate和revers，瀏覽器對其他值的支持不佳

<iframe 
width="100%" height="300" src="//jsfiddle.net/xiaoying/2414dr39/embedded/">
</iframe>

感謝你能夠認真閱讀完這篇文章，希望小編分享的“css3動畫之transition和animation屬性有什么用”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯，關注創(chuàng)新互聯行業(yè)資訊頻道，更多相關知識等著你來學習!

網站標題：css3動畫之transition和animation屬性有什么用
本文來源：http://aaarwkj.com/article16/gppsgg.html

成都網站建設公司_創(chuàng)新互聯，為您提供定制開發(fā)、做網站、企業(yè)網站制作、小程序開發(fā)、網站營銷、微信公眾號

廣告

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