animation demo

Posted gaoxuerong123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

 

以上是关于animation demo的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段——CSS动画

VSCode自定义代码片段7——CSS动画

VSCode自定义代码片段7——CSS动画

Unity 使用Animation Clip(动画片段) 对Animation Rig的Rig Weight (rig权重) 进行调整,出现无法调整的问题,及解决方法

Android补间动画(附带Demo案例)

[vscode]--HTML代码片段(基础版,reactvuejquery)