1.container {
2  position: absolute;
3  top: 45%;
4  left: 48%;
5}
6
7.square {
8  width: 8px;
9  height: 30px;
10  background: rgb(71, 195, 248);
11  border-radius: 10px;
12  display: block;
13  /*margin:10px;*/
14  -webkit-animation: turn 2.5s ease infinite;
15  animation: turn 2.5s ease infinite;
16  box-shadow: rgb(71, 195, 248) 0px 1px 15px 0px;
17}
18
19.top {
20  position: absolute;
21  left: 40%;
22  top: 50%;
23  -webkit-transform: rotate(90deg);
24  transform: rotate(90deg);
25}
26
27.bottom {
28  position: absolute;
29  left: 40%;
30  top: 50%;
31  -webkit-transform: rotate(-90deg);
32  transform: rotate(-90deg);
33}
34
35.left {
36  position: absolute;
37  left: 40%;
38  top: 50%;
39}
40
41.right {
42  position: absolute;
43  left: 40%;
44  top: 50%;
45  -webkit-transform: rotate(-180deg);
46  transform: rotate(-180deg);
47}
48
49@-webkit-keyframes turn {
50  0% {
51    transform: translateX(0) translateY(0) rotate(0);
52  }
53
54  50% {
55    transform: translateX(400%) translateY(100%) rotate(90deg);
56  }
57
58  100% {
59    transform: translateX(0) translateY(0) rotate(0);
60  }
61}
62
63@keyframes turn {
64  0% {
65    transform: translateX(0) translateY(0) rotate(0);
66  }
67
68  70% {
69    transform: translateX(400%) translateY(100%) rotate(90deg);
70  }
71
72  100% {
73    transform: translateX(0) translateY(0) rotate(0);
74  }
75}