animation demo 

 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>

 

posted @ 2018-08-12 17:40  gaoxuerong  阅读(170)  评论(0)    收藏  举报