CSS animation動畫
阿新 • • 發佈：2018-12-14
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box { background-color: cadetblue; position:relative; height: 150px; width: 150px; animation:mymove 1s infinite alternate; -webkit-animation:boxmove 1s infinite alternate; /* animation-direction:alternate; */ } @keyframes boxmove { from {left: 0;} to {left: 1000px;} } </style> </head> <body> <div class="box"></div> </body> </html>
animation: name duration timing-function delay iteration-count direction;
- *animation-name 繫結到選擇器的 keyframe 名稱
- *animation-duration 完成動畫所花費的時間，以秒或毫秒計。
- animation-timing-function 完成動畫速度曲線
- animation-delay 動畫開始前的延遲
- *animation-iteration-count 動畫執行次數 n | infinite(無限)
- animation-direction (alternate 輪流往返播放)
帶 * 為必須加的欄位， 需給 box加樣式 position：relative