早期在Web中要實(shí)現(xiàn)動(dòng)畫(huà)效果，都是依賴于JavaScript或Flash來(lái)完成。但在CSS3中新增加了一個(gè)新的模塊transition，它可以通過(guò)一些簡(jiǎn)單的CSS事件來(lái)觸發(fā)元素的外觀變化，讓效果顯得更加細(xì)膩。簡(jiǎn)單點(diǎn)說(shuō)，就是通過(guò)鼠標(biāo)的單擊、獲得焦點(diǎn)，被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)，并平滑地以動(dòng)畫(huà)效果改變CSS的屬性值。

在CSS中創(chuàng)建簡(jiǎn)單的過(guò)渡效果可以從以下幾個(gè)步驟來(lái)實(shí)現(xiàn)： 第一，在默認(rèn)樣式中聲明元素的初始狀態(tài)樣式； 第二，聲明過(guò)渡元素最終狀態(tài)樣式，比如懸浮狀態(tài)； 第三，在默認(rèn)樣式中通過(guò)添加過(guò)渡函數(shù)，添加一些不同的樣式。

CSS3的過(guò)度transition屬性是一個(gè)復(fù)合屬性，主要包括以下幾個(gè)子屬性：

• transition-property:指定過(guò)渡或動(dòng)態(tài)模擬的CSS屬性
• transition-duration:指定完成過(guò)渡所需的時(shí)間
• transition-timing-function:指定過(guò)渡函數(shù)
• transition-delay:指定開(kāi)始出現(xiàn)的延遲時(shí)間

先來(lái)看transition-property屬性

transition-property用來(lái)指定過(guò)渡動(dòng)畫(huà)的CSS屬性名稱，而這個(gè)過(guò)渡屬性只有具備一個(gè)中點(diǎn)值的屬性（需要產(chǎn)生動(dòng)畫(huà)的屬性）才能具備過(guò)渡效果，其對(duì)應(yīng)具有過(guò)渡的CSS屬性主要有：

HTML:

<div></div>

CSS:

div {width: 200px;height: 200px;background-color:red;margin: 20px auto;-webkit-transition: background-color .5s ease .1s;transition: background-color .5s ease .1s; } div:hover {background-color: orange; }

演示結(jié)果:

鼠標(biāo)移入

鼠標(biāo)移出

特別注意：當(dāng)“transition-property”屬性設(shè)置為all時(shí)，表示的是所有中點(diǎn)值的屬性。

用一個(gè)簡(jiǎn)單的例子來(lái)說(shuō)明這個(gè)問(wèn)題：

假設(shè)你的初始狀態(tài)設(shè)置了樣式“width”,“height”,“background”,當(dāng)你在終始狀態(tài)都改變了這三個(gè)屬性，那么all代表的就是“width”、“height”和“background”。如果你的終始狀態(tài)只改變了“width”和“height”時(shí)，那么all代表的就是“width”和“height”。

轉(zhuǎn)載于:https://www.cnblogs.com/gulan/p/5820638.html

總結(jié)

以上是生活随笔為你收集整理的动画--过渡属性 transition-property的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。