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