1.loader {
2  width: 112px;
3  height: 112px;
4}
5
6.box1,
7.box2,
8.box3 {
9  border: 16px solid red;
10  box-sizing: border-box;
11  position: absolute;
12  display: block;
13}
14
15.box1 {
16  width: 112px;
17  height: 48px;
18  margin-top: 64px;
19  margin-left: 0px;
20  animation: abox1 4s 1s forwards ease-in-out infinite;
21}
22
23.box2 {
24  width: 48px;
25  height: 48px;
26  margin-top: 0px;
27  margin-left: 0px;
28  animation: abox2 4s 1s forwards ease-in-out infinite;
29}
30
31.box3 {
32  width: 48px;
33  height: 48px;
34  margin-top: 0px;
35  margin-left: 64px;
36  animation: abox3 4s 1s forwards ease-in-out infinite;
37}
38
39@keyframes abox1 {
40  0% {
41    width: 112px;
42    height: 48px;
43    margin-top: 64px;
44    margin-left: 0px;
45  }
46
47  12.5% {
48    width: 48px;
49    height: 48px;
50    margin-top: 64px;
51    margin-left: 0px;
52  }
53
54  25% {
55    width: 48px;
56    height: 48px;
57    margin-top: 64px;
58    margin-left: 0px;
59  }
60
61  37.5% {
62    width: 48px;
63    height: 48px;
64    margin-top: 64px;
65    margin-left: 0px;
66  }
67
68  50% {
69    width: 48px;
70    height: 48px;
71    margin-top: 64px;
72    margin-left: 0px;
73  }
74
75  62.5% {
76    width: 48px;
77    height: 48px;
78    margin-top: 64px;
79    margin-left: 0px;
80  }
81
82  75% {
83    width: 48px;
84    height: 112px;
85    margin-top: 0px;
86    margin-left: 0px;
87  }
88
89  87.5% {
90    width: 48px;
91    height: 48px;
92    margin-top: 0px;
93    margin-left: 0px;
94  }
95
96  100% {
97    width: 48px;
98    height: 48px;
99    margin-top: 0px;
100    margin-left: 0px;
101  }
102}
103
104@keyframes abox2 {
105  0% {
106    width: 48px;
107    height: 48px;
108    margin-top: 0px;
109    margin-left: 0px;
110  }
111
112  12.5% {
113    width: 48px;
114    height: 48px;
115    margin-top: 0px;
116    margin-left: 0px;
117  }
118
119  25% {
120    width: 48px;
121    height: 48px;
122    margin-top: 0px;
123    margin-left: 0px;
124  }
125
126  37.5% {
127    width: 48px;
128    height: 48px;
129    margin-top: 0px;
130    margin-left: 0px;
131  }
132
133  50% {
134    width: 112px;
135    height: 48px;
136    margin-top: 0px;
137    margin-left: 0px;
138  }
139
140  62.5% {
141    width: 48px;
142    height: 48px;
143    margin-top: 0px;
144    margin-left: 64px;
145  }
146
147  75% {
148    width: 48px;
149    height: 48px;
150    margin-top: 0px;
151    margin-left: 64px;
152  }
153
154  87.5% {
155    width: 48px;
156    height: 48px;
157    margin-top: 0px;
158    margin-left: 64px;
159  }
160
161  100% {
162    width: 48px;
163    height: 48px;
164    margin-top: 0px;
165    margin-left: 64px;
166  }
167}
168
169@keyframes abox3 {
170  0% {
171    width: 48px;
172    height: 48px;
173    margin-top: 0px;
174    margin-left: 64px;
175  }
176
177  12.5% {
178    width: 48px;
179    height: 48px;
180    margin-top: 0px;
181    margin-left: 64px;
182  }
183
184  25% {
185    width: 48px;
186    height: 112px;
187    margin-top: 0px;
188    margin-left: 64px;
189  }
190
191  37.5% {
192    width: 48px;
193    height: 48px;
194    margin-top: 64px;
195    margin-left: 64px;
196  }
197
198  50% {
199    width: 48px;
200    height: 48px;
201    margin-top: 64px;
202    margin-left: 64px;
203  }
204
205  62.5% {
206    width: 48px;
207    height: 48px;
208    margin-top: 64px;
209    margin-left: 64px;
210  }
211
212  75% {
213    width: 48px;
214    height: 48px;
215    margin-top: 64px;
216    margin-left: 64px;
217  }
218
219  87.5% {
220    width: 48px;
221    height: 48px;
222    margin-top: 64px;
223    margin-left: 64px;
224  }
225
226  100% {
227    width: 112px;
228    height: 48px;
229    margin-top: 64px;
230    margin-left: 0px;
231  }
232}
233