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>
