### css動畫 —— transition 1. transition-property：需要過渡的 css 屬性，如 width 2. transition-duration：過渡的時長，如 1s 3. transition-timing-function：指定一個函數，該函數反應了屬性值的變化快慢（速度）。可以是緩動函數的名稱，也可以是 css3 中的貝塞爾曲線函數 4. transition-delay：延遲開始過渡的時間，如 0.5s ``` div { background: #fff; color: #000; transition: all 1s linear 0.5s; } div:hover { background: #000; color: #fff; } ``` ***** ***** ### css動畫 —— animation 1. animation-delay：動畫開始時的延遲時間。默認 0s，無延時 2. animation-direction：動畫是否反向播放。默認 normal，表示動畫結束之后，回到起點狀態 3. animation-duration：動畫時長。默認 0s，無動畫 4. animation-iteration-count：動畫重復次數。默認 1，只執行一次動畫 5. animation-name：動畫名稱，該名稱為動畫關鍵幀的名稱。默認 none 6. animation-play-state：動畫狀態，即是處于播放還是暫停狀態。默認 running，為播放狀態 7. animation-timing-function：動畫速度。默認 ease 8. animation-fill-mode：指定在動畫執行之前和之后如何給動畫的目標應用樣式。 ``` @keyframes move { from { width: 100px; } to { width: 200px; } } /* 或 */ @keyframes move { 0% { width: 100px; } 100% { width: 200px; } } //動畫使用 div:hover { animation: 1s 1s rainbow linear 3 forwards normal; animation-play-state: paused | running; } //屬性詳情 div:hover { · animation-name: rainbow; animation-duration: 1s; animation-timing-function: linear; animation-delay: 1s; animation-fill-mode:forwards; animation-direction: normal; animation-iteration-count: 3; //畫保持突然終止時的狀態 animation-play-state: paused | running; } ```