CSS3过渡属性transition详解
拖了兩天的更新誒，懈怠了懈怠了
transition蠻好玩的，可以實(shí)現(xiàn)由一個(gè)狀態(tài)像另一個(gè)狀態(tài)的動(dòng)畫(huà)過(guò)渡，無(wú)縫斜街的感覺(jué)，不多說(shuō)啦，開(kāi)始介紹屬性吧~
1.transition可以傳4 / (4n)個(gè)參數(shù)，（4n是因?yàn)樗梢詫?duì)不同的屬性分別加過(guò)渡效果）
第一位：設(shè)置參與過(guò)渡的屬性
第二位：過(guò)渡的時(shí)間
第三位：過(guò)渡的動(dòng)畫(huà)類(lèi)型（選填，默認(rèn)ease）
第四位：開(kāi)始過(guò)渡的延時(shí)（選填，默認(rèn)0）
這里給個(gè)【例1】，為了知識(shí)點(diǎn)一目了然放后面啦
第二位和第四位填時(shí)間就好啦，接下來(lái)詳細(xì)介紹一下第一位和第三位
2.第一位屬性值
第一位通常填all，如【例1】，檢測(cè)到所有的屬性過(guò)渡，也可以分別填寫(xiě)某個(gè)屬性【例2-1】，或者某幾個(gè)屬性【例2-2】
3.第三位屬性值
通常有ease【例2-2】，linear【例2-1】，ease-in，ease-out，ease-in-out等，不過(guò)實(shí)質(zhì)上是貝塞爾曲線(xiàn)，即可填cubic-bezier(num,num,num,num)【例3-1】該屬性值去自定義設(shè)置過(guò)渡的動(dòng)畫(huà)類(lèi)型
貝塞爾曲線(xiàn)我在下一節(jié)詳細(xì)介紹，下面給例子吧
【例1】給hover添加過(guò)渡的效果，如下
代碼?
<!DOCTYPE html> <html lang="en"> <head><style>div {width: 100px;height: 100px; background-color: #f88;position: absolute;left: 10px;top: 10px;opacity: 0.3; transition: all 2s linear 0.5s; }div:hover {width: 120px;height: 120px;background-color: #88f;top: 100px;left: 100px;opacity: 1;}</style> </head> <body><div></div> </body> </html>【例2-1】只給顏色添加過(guò)渡的效果，如下
代碼 ：修改【例1】代碼的樣式部分
div {width: 100px;height: 100px; background-color: #f88;position: absolute;left: 10px;top: 10px;opacity: 0.3; transition: background-color 2s linear 0.5s; } div:hover {width: 120px;height: 120px;background-color: #88f;opacity: 1; }【例2-2】給寬度和高度設(shè)置不同的過(guò)渡效果，如下
代碼：修改【例2-1】div的transition屬性如下
div {width: 100px;height: 100px; background-color: #f88;position: absolute;left: 10px;top: 10px;opacity: 0.3; transition: width 2s linear 1s, height 4s ease 3s ; }【例3-1】貝塞爾曲線(xiàn)
代碼
<!DOCTYPE html> <html lang="en"> <head><style> div {width: 100px;height: 50px; background-color: #f88;position: absolute;left: 10px;top: 10px;opacity: 0.3; transition: all 1s cubic-bezier(0,0,1,1); } div:hover {width: 200px;background-color: #88f;opacity: 1; }</style> </head> <body><div></div> </body> </html>效果
可以看出來(lái)，它是線(xiàn)性變化，此時(shí)的 s - t 圖如下
transition還有step-start，step-end，steps()，幾個(gè)屬性，animation也有，后續(xù)放在animation中講
總結(jié)
以上是生活随笔為你收集整理的CSS3过渡属性transition详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： CSS3的弹性盒子flex详解（2）
- 下一篇： 1分钟深入了解CSS3的动画属性anim