CSS3動畫——transition（過渡）

2024-04-27 15:05:33

字體：大中小

來源：轉載

供稿：網友

簡介：transition（過渡）字如其名，是用來設置元素由一種狀態到另一種狀態中間的過渡效果的，比如變化的速度，變化的持續時間等。它主要有4個屬性，分別是transition-PRoperty（屬性，如width,color等），transition-duration（變化持續時間），transition-timing-function（如何變化），transition-delay（延遲時間）。使用方法如下：

一.語法

transition:property duration timing-function delay；

二.參數 1.property：指對哪個屬性進行過渡，有三種設置方法，none（不對任何屬性進行過渡），all（對所有屬性都進行過渡），indent（元素屬性名，如width,color等）。 2.duration：規定過渡持續的時間，單位為秒或毫秒（s/ms）。 3.timing-function：過渡的效果：（1）ease：逐漸變慢，默認值（2）linear：勻速（3）ease-in：加速（4）ease-out：減速（5）ease-in-out：加速然后減速（6）cubic-bezier：該值允許你去自定義一個時間曲線，(x1, y1, x2, y2)四個值特定于曲線上點P1和點 P2。所有值需在[0, 1]區域內，否則無效。 4.delay：過渡效果何時開始。

三.小練習

<!DOCTYPE html><html><head> <title>transition的應用</title> <style> html,body { margin: 0; padding: 0; font-size: 36px; } .demo-parent { width: 100%; height: 700px; background: black; position: fixed; display: flex; flex-direction:row; justify-content: center; padding-top: 260px; } .demo { background: yellow; transition: 3s linear 1s; color: #fff; height: 30%; text-align: center; opacity: 1; padding: 10px; } .demo:hover { background: #ccc; color: green; opacity: 0.9; border-radius: 5px; } h1 { font-size: 2em; } p { font-size: 1em; } </style></head><body><div class="demo-parent"> <div class="demo"> <h1>我是最大的字</h1> <p>注意看我的顏色和背景如何變化哦！</p> </div></div><script type="text/javascript"></script></body></html>

效果如圖：這里寫圖片描述圖片只是個變化的各個階段的效果，當然過渡不會這么生硬，一切以運行效果為準。