1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style>
9 .animation {
10 margin: 100px 100px;
11 width: 200px;
12 height: 100px;
13 background-color: #3a9;
14 animation-name: animation;
15 animation-delay: 2s;
16 animation-duration: 5s;
17 animation-timing-function: ease;
18 animation-direction: reverse;
19
20 }
21 @keyframes animation {
22 0% {background-color: rgb(148, 190, 31); border-radius: 50%;}
23 25% {background-color: rgb(31, 185, 190);}
24 50% {margin-left: 300px; margin-top: 300px ;}
25 75% {margin-left: 500px; margin-top: 300px; background-color: #3a9;}
26 100% {margin-right: 300px; margin-top: 400px; background-color: #f00;}
27 }
28 </style>
29 </head>
30 <body>
31 <div class="animation">高</div>
32 </body>
33 </html>
