1.container {
2  position: absolute;
3  width: 100px;
4  height: 100px;
5  top: 0;
6  bottom: 0;
7  left: 0;
8  right: 0;
9  margin: auto;
10}
11
12.item {
13  width: 50px;
14  height: 50px;
15  position: absolute;
16}
17
18.item-1 {
19  background-color: rgb(250, 87, 103);
20  top: 0;
21  left: 0;
22  z-index: 1;
23  animation: item-1_move 1.8s cubic-bezier(.6,.01,.4,1) infinite;
24}
25
26.item-2 {
27  background-color: rgb(121, 68, 228);
28  top: 0;
29  right: 0;
30  animation: item-2_move 1.8s cubic-bezier(.6,.01,.4,1) infinite;
31}
32
33.item-3 {
34  background-color: rgb(27, 145, 247);
35  bottom: 0;
36  right: 0;
37  z-index: 1;
38  animation: item-3_move 1.8s cubic-bezier(.6,.01,.4,1) infinite;
39}
40
41.item-4 {
42  background-color: rgb(250, 194, 76);
43  bottom: 0;
44  left: 0;
45  animation: item-4_move 1.8s cubic-bezier(.6,.01,.4,1) infinite;
46}
47
48@keyframes item-1_move {
49  0%, 100% {
50    transform: translate(0, 0)
51  }
52
53  25% {
54    transform: translate(0, 50px)
55  }
56
57  50% {
58    transform: translate(50px, 50px)
59  }
60
61  75% {
62    transform: translate(50px, 0)
63  }
64}
65
66@keyframes item-2_move {
67  0%, 100% {
68    transform: translate(0, 0)
69  }
70
71  25% {
72    transform: translate(-50px, 0)
73  }
74
75  50% {
76    transform: translate(-50px, 50px)
77  }
78
79  75% {
80    transform: translate(0, 50px)
81  }
82}
83
84@keyframes item-3_move {
85  0%, 100% {
86    transform: translate(0, 0)
87  }
88
89  25% {
90    transform: translate(0, -50px)
91  }
92
93  50% {
94    transform: translate(-50px, -50px)
95  }
96
97  75% {
98    transform: translate(-50px, 0)
99  }
100}
101
102@keyframes item-4_move {
103  0%, 100% {
104    transform: translate(0, 0)
105  }
106
107  25% {
108    transform: translate(50px, 0)
109  }
110
111  50% {
112    transform: translate(50px, -50px)
113  }
114
115  75% {
116    transform: translate(0, -50px)
117  }
118}