码迷,mamicode.com
首页 > 其他好文 > 详细

animation demo

时间:2018-08-12 18:46:20      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:initial   func   border   function   char   height   width   ack   div   

 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>

 

animation demo

标签:initial   func   border   function   char   height   width   ack   div   

原文地址:https://www.cnblogs.com/gaoxuerong123/p/9463747.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!