1.quater {
2  height: 1.5cm;
3  width: 1.5cm;
4  background-color: skyblue;
5  float: left;
6  position: relative;
7  bottom: 1.25cm;
8}
9
10.i {
11  border-top-left-radius: 100%;
12  animation: spin1 2s ease-in-out infinite;
13  transform-origin: 1.5cm 1.5cm;
14}
15
16.ii {
17  border-top-right-radius: 100%;
18  animation: spin2 2s ease-in-out infinite;
19  transform-origin: 0 1.5cm;
20}
21
22@keyframes spin1 {
23  0% {
24    transform: rotateZ(0deg);
25  }
26
27  25% {
28    transform: rotateZ(0deg);
29  }
30
31  50% {
32    transform: rotateZ(180deg);
33  }
34
35  75% {
36    transform: rotateZ(180deg);
37  }
38
39  100% {
40    transform: rotateZ(360deg);
41  }
42}
43
44@keyframes spin2 {
45  0% {
46    transform: rotateZ(0deg);
47  }
48
49  25% {
50    transform: rotateZ(180deg);
51  }
52
53  50% {
54    transform: rotateZ(180deg);
55  }
56
57  75% {
58    transform: rotateZ(360deg);
59  }
60
61  100% {
62    transform: rotateZ(360deg);
63  }
64}