資料結構與演算法-紅黑樹
阿新 • • 發佈：2021-11-17
animation一般是與 @keyframes一起用，來製作網頁動畫。
但animation有很多引數，每種引數對應的屬性有不同含義。
引數型別如下：
animation-name ：檢索或設定物件所應用的動畫名稱
animation-duration ：檢索或設定物件動畫的持續時間
animation-timing-function ：檢索或設定物件動畫的過渡型別
animation-delay ：檢索或設定物件動畫延遲的時間
animation-iteration-count ：檢索或設定物件動畫的迴圈次數
animation-direction ：檢索或設定物件動畫在迴圈中是否反向運動
animation-fill-mode ：檢索或設定物件動畫時間之外的狀態
animation-play-state ：檢索或設定物件動畫的狀態。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> @keyframes move { 0%{transform: rotate(0)} 100%{transform: rotate(360deg)} } #div1{width: 100px;height: 300px;margin: 100px auto 0;background: lightcoral; animation:move 2s linear 5s infinite} </style> </head> <body> <div id="div1"></div> </body> </html>
程式碼說明 move為animation-name infinite為animation-iteration-count
2s為animation-duration 5s為animation-delay