動畫animate 之動畫序列
阿新 • • 發佈:2022-03-22
實現如上功能,需要分為五個狀態,狀態如下:
程式碼如下;
<!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>Document</title> <style> div { width: 100px; height: 100px; background-color: pink; animation-name: move; animation-duration: 5s; } /* 1、可以做多個狀態的變化 keyframe關鍵詞 2、裡面的百分比要是整數 3、裡面的百分比就是總的時間(5s)的劃分 */ @keyframes move { 0% { transform: translate(0, 0); } 25% { transform : translate(1000px, 0); } 50% { transform : translate(1000px, 600px); } 75% { transform: translate(0px, 600px); } 100% { transform: translate(0, 0); } } </style> </head> <body> <div> </div> </body> </html>