animation,transition,transform小练习

Posted yinhao-jack

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了animation,transition,transform小练习相关的知识，希望对你有一定的参考价值。

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         .main {
  8             position: absolute;
  9             width:300px;
 10             height:500px;
 11             background-color: fuchsia;
 12         }
 13 
 14         .content{
 15             position:absolute;
 16             width:50px;
 17             height:50px;
 18             background-color: red;
 19             animation: one 6s  infinite;
 20             /*transition: two 3s ease 0s;*/
 21         }
 22 
 23         .content1{
 24             position:absolute;
 25             width:50px;
 26             height:50px;
 27             background-color: yellow;
 28             border-radius: 50px;
 29             animation: two 3s ease 0s infinite;
 30         }
 31 
 32         .content2{
 33             position:absolute;
 34             width:50px;
 35             height:50px;
 36             background-color: dodgerblue;
 37             /*animation: three 3s ease 0s infinite;*/
 38             transition:all 2s;
 39             transition-delay:5s;
 40 
 41             /*transition-duration: 2s, 4s;*/
 42         }
 43 
 44         .content2:hover{
 45            height:300px;
 46             width:200px;
 47             transform: translateX(100px) translateY(100px) scale(0.8) rotate(360deg);
 48         }
 49 
 50         @keyframes one {
 51             0% {
 52                 transform:   rotate(0deg) ;
 53                 left:0px;
 54             }
 55             20%{
 56                 transform: rotate(50deg);
 57                 left:50px;
 58                 top:100px
 59             }
 60             60%{
 61                 transform:  rotate(180deg);
 62                 left:150px;
 63                 top:150px
 64             }
 65             100%{
 66                 transform:  rotate(360deg);
 67                 left:230px;
 68             }
 69         }
 70 
 71         @keyframes two {
 72             0% {
 73                 transform:   rotate(0deg) ;
 74                 left:0px;
 75                 width:100px;
 76             }
 77             20%{
 78                 transform: rotate(50deg);
 79                 left:50px;
 80                 top:250px;
 81                 width:120px;
 82             }
 83 
 84             60%{
 85                 transform:  rotate(180deg);
 86                 left:150px;
 87                 top:400px;
 88                 width:190px;
 89             }
 90             100%{
 91                 transform:  rotate(360deg);
 92                 left:250px;
 93                 width:300px;
 94             }
 95         }
 96 
 97         @keyframes three {
 98             0% {
 99                 transform:   rotate(0deg) ;
100                 left:0px;
101             }
102             20%{
103                 transform: rotate(50deg);
104                 left:50px;
105                 top:250px
106             }
107 
108             60%{
109                 transform:  rotate(180deg);
110                 left:150px;
111                 top:400px
112             }
113             100%{
114                 transform:  rotate(360deg);
115                 left:250px;
116             }
117         }
118     </style>
119 
120 
121 </head>
122 <body>
123 
124 
125 <div class="main">
126     <div class="content"></div>
127     <div class="content1"></div>
128     <div class="content2"></div>
129 </div>
130 </body>
131 </html>

 

以上是关于animation,transition,transform小练习的主要内容，如果未能解决你的问题，请参考以下文章

vue3 之 Transition && 各种动画实现，一文让你会动画

animation和transition得区别

什么时候使用transition?什么时候使用animation？

CSS animation 与 CSS transition 有何区别

动画animation transition 属性

transition和animation的区别?