css3動(dòng)畫(huà)之transition和animation屬性有什么用

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

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

tradition一共以下有4個(gè)屬性：

transition-property 過(guò)渡屬性
transition-duration 完成動(dòng)畫(huà)所需時(shí)間，以秒或者毫秒計(jì)算
transition-timing-function 規(guī)定動(dòng)畫(huà)變化速度曲線
transition-delay 是否延時(shí)

transition-property 過(guò)渡屬性

none：沒(méi)有屬性會(huì)獲得過(guò)渡效果

all：所有屬性會(huì)獲得過(guò)渡效果

porperty：width,height...

img{    
    height:15px;    
    width:15px;
}
img:hover{    
    height: 450px;    
    width: 450px;
}

transition的作用在于指定狀態(tài)變化所需要的時(shí)間。

img{
    transition: 1s;
}

transition-duration 完成狀態(tài)過(guò)渡的秒或者毫秒

還可以指定transition的變化屬性，例如是width變化還是height

img{
    transition: 1s height;
}

還可以指定多個(gè)屬性

img{
    transition: 1s height, 1s width
}

transition-delay 狀態(tài)變化速度。

指定delay參數(shù)，使得height先發(fā)生變化，然后在讓width發(fā)生變化：

img{
    transition: 1s height, 1s 1s width
}

delay 真正的意義在于指定了動(dòng)畫(huà)發(fā)生的順序，使得多個(gè)不同的transition可以在不同的時(shí)刻發(fā)生形成一種動(dòng)畫(huà)效果

transition-timing-function 狀態(tài)變化速度

默認(rèn)的是逐漸放慢 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需要明確知道開(kāi)始狀態(tài)和結(jié)束狀態(tài)的具體數(shù)值才能計(jì)算出中間狀態(tài)。但是transition沒(méi)法計(jì)算出0->auto的狀態(tài)，那么就不會(huì)產(chǎn)生動(dòng)畫(huà)效果。類(lèi)似情況還有display：none->block和background:url(foo.jpg)->url(bar.jpg)的情況。

它有的缺點(diǎn)：

需要事件觸發(fā)，沒(méi)法在網(wǎng)頁(yè)加載時(shí)候直接發(fā)生
是一次性的，不能重復(fù)發(fā)生，除非你重復(fù)觸發(fā)它
只能定義開(kāi)始狀態(tài)和結(jié)束狀態(tài)，不能定義中間狀態(tài)
一個(gè)transition規(guī)則，只能定義一個(gè)屬性的變化

animation

CSS Animation一共有以下屬性：

animation-name 需要綁定到選擇器keyframe的名稱
animation-duration 完成動(dòng)畫(huà)所需時(shí)間，以秒或者毫秒計(jì)算
animation-timing-function 規(guī)定動(dòng)畫(huà)的速度曲線
animaton-delay 動(dòng)畫(huà)開(kāi)始之前延時(shí)的時(shí)間
animation-iteration-count 動(dòng)畫(huà)應(yīng)該播放的次數(shù)
animation-direction 是否應(yīng)該輪流反向播放動(dòng)畫(huà)
animation-fill-mode 屬性規(guī)定動(dòng)畫(huà)播放之后其動(dòng)態(tài)效果是否可見(jiàn)
animatoin-play-state 規(guī)定動(dòng)畫(huà)正在運(yùn)行還是暫停

iteration-重復(fù)

animation-name

animation-duration

首先設(shè)置動(dòng)畫(huà)的名稱和持續(xù)的時(shí)長(zhǎng)

p:hover{
animation: 1s rainbow;
}

上面代碼表示，當(dāng)鼠標(biāo)懸停在p元素上時(shí)，會(huì)產(chǎn)生名為rainbow的動(dòng)畫(huà)效果，持續(xù)時(shí)間為1秒。為此，我們還需要用keyframes關(guān)鍵字，定義rainbow效果。

@keyframs rainbow{
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}

keyframs的寫(xiě)法相當(dāng)自由

可以用from表示0%，to 表示100%

@keyframs rainbow{
from { background: #c00; }
50% { background: orange; }
to { background: yellowgreen; }
}

如果忽略某個(gè)狀態(tài)，瀏覽器會(huì)自動(dòng)推算

@keyframs rainbow{
   50% { background: orange; }
     to { background: yellowgreen; }
}

@keyframs rainbow{
to { background: yellowgreen; }
}

@keyframs rainbow{
from, to { background: yellowgreen; }
}

瀏覽器從一個(gè)狀態(tài)到另外一個(gè)狀態(tài)是平滑過(guò)渡到，steps函數(shù)實(shí)現(xiàn)分步過(guò)渡

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

默認(rèn)情況下，動(dòng)畫(huà)只播放一次。加入infinite關(guān)鍵字，可以讓動(dòng)畫(huà)無(wú)限次播放。

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

除了infinite，還可以設(shè)置為具體的次數(shù)： 3、5

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

animation-fill-mode

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

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

animation-fill-mode 有4種取值

none 不改變默認(rèn)行為

forawads 動(dòng)畫(huà)完成后，保持最后一個(gè)屬性（在最后一個(gè)關(guān)鍵幀中定義）

backwards 在 animation-delay 所指定的一段時(shí)間內(nèi)，在動(dòng)畫(huà)顯示之前，應(yīng)用開(kāi)始屬性值（在第一個(gè)關(guān)鍵幀中定義）。

both 向前向后都進(jìn)行填充

animation-direction

規(guī)定了輪流反向播放動(dòng)畫(huà)

alternate：動(dòng)畫(huà)會(huì)在奇數(shù)次（1，3，5...）正常播放，偶數(shù)次（2,4,6...）反向播放

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

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

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

網(wǎng)站標(biāo)題：css3動(dòng)畫(huà)之transition和animation屬性有什么用
本文來(lái)源：http://muchs.cn/article16/gppsgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開(kāi)發(fā)、做網(wǎng)站、企業(yè)網(wǎng)站制作、小程序開(kāi)發(fā)、網(wǎng)站營(yíng)銷(xiāo)、微信公眾號(hào)

聲明：本網(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í)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容