CSS3过渡属性transition详解
拖了兩天的更新誒，懈怠了懈怠了
transition蠻好玩的，可以實現由一個狀態像另一個狀態的動畫過渡，無縫斜街的感覺，不多說啦，開始介紹屬性吧~
1.transition可以傳4 / (4n)個參數，（4n是因為它可以對不同的屬性分別加過渡效果）
第一位：設置參與過渡的屬性
第二位：過渡的時間
第三位：過渡的動畫類型（選填，默認ease）
第四位：開始過渡的延時（選填，默認0）
這里給個【例1】，為了知識點一目了然放后面啦
第二位和第四位填時間就好啦，接下來詳細介紹一下第一位和第三位
2.第一位屬性值
第一位通常填all，如【例1】，檢測到所有的屬性過渡，也可以分別填寫某個屬性【例2-1】，或者某幾個屬性【例2-2】
3.第三位屬性值
通常有ease【例2-2】，linear【例2-1】，ease-in，ease-out，ease-in-out等，不過實質上是貝塞爾曲線，即可填cubic-bezier(num,num,num,num)【例3-1】該屬性值去自定義設置過渡的動畫類型
貝塞爾曲線我在下一節詳細介紹，下面給例子吧
【例1】給hover添加過渡的效果，如下
代碼?
<!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】只給顏色添加過渡的效果，如下
代碼 ：修改【例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】給寬度和高度設置不同的過渡效果，如下
代碼：修改【例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】貝塞爾曲線
代碼
<!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>效果
可以看出來，它是線性變化，此時的 s - t 圖如下
transition還有step-start，step-end，steps()，幾個屬性，animation也有，后續放在animation中講
總結
以上是生活随笔為你收集整理的CSS3过渡属性transition详解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS3的弹性盒子flex详解（2）
- 下一篇： 1分钟深入了解CSS3的动画属性anim