animation動畫
阿新 • • 發佈：2022-03-26
animation 屬性
animation 用來設定動畫的名稱、執行時間等。
animation-name：動畫名稱。
animation-duration：動畫執行時間。
animation-iteration-count：動畫執行次數，infinite -- 一直執行。
animation-fill-mode：動畫執行之前或之後的效果是否可見，forwards -- 動畫執行完之後不會變成原來的效果。
animation-delay：動畫延遲執行的時間。
animation-direction：動畫下一次執行的順序，alternate -- 奇數次正向播放，偶數次反向播放；reverse -- 反向播放；alternate-reverse -- 奇數次反向播放，偶數次正向播放。
animation-timing-function：動畫執行的速度曲線，ease-in -- 緩慢開始，ease-out -- 緩慢結束，ease-in-out -- 緩慢開始緩慢結束。
animation 是一個複合屬性，依次是：名稱、時間、執行次數、動畫之前或之後的效果是否可見、延遲時間、播放順序、速度曲線。
@keyframes 屬性用來設定具體的動畫
語法：@keyframes 動畫名 { from(開始){ css效果 } to(結束){ css效果 } }
也可以：@keyframes 動畫名 { 25%{ css效果 } 50%{ css效果 } 75{ css效果 } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>動畫</title> <style> body { background: #555; } .box { background: cyan; width: 200px; height: 200px; /* 動畫名稱 */ animation-name: anima1; /* 動畫執行時間 */ animation-duration: 3s; /* 動畫執行次數 infinite是一直執行 */ animation-iteration-count: infinite; /* 動畫執行之前或之後的效果是否可見 forwards：動畫執行完之後不會變成原來的效果*/ animation-fill-mode: forwards; /* 動畫的延遲執行時間 */ /* animation-delay: 1s; */ /* 動畫下一次執行的順序。alternate指的是奇數次正向播放，偶數次反向播放 */ /* reverse：反向播放 */ /* alternate-reverse：奇數次反向播放，偶數次正向播放 */ animation-direction: alternate-reverse; /* 速度曲線 */ /* ease-in：緩慢開始 ease-out：緩慢結束 ease-in-out：緩慢開始緩慢結束*/ animation-timing-function: ease-in-out; position: relative; /* animation: 名稱 時間 執行次數 動畫之前或之後的效果是否可見 延遲時間 播放順序 速度曲線; */ } /* 動畫 */ @keyframes anima1 { /* 開始 */ from { width: 200px; background: red; top: 0; left: 0; } /* 結束 */ to { width: 600px; background: cyan; top: 200px; left: 100px; } } </style> </head> <body> <div class="box"></div> </body> </html>
<style> body { background: #555; } .box { background: #fff; width: 200px; height: 200px; position: relative; top: 0; left: 0; animation: anima1 5s infinite forwards ease-in-out; } /* 動畫 */ @keyframes anima1 { 25% { top: 0; left: 300px; background: red; border-radius: 50% 0 0 0; } 50% { top: 300px; left: 300px; background: cyan; border-radius: 0 50% 0 0; } 75% { top: 300px; left: 0%; background: gray; border-radius: 0 0 50% 0; } 100% { top: 0; left: 0; border-radius: 0 0 0 50%; } } </style>