1.newtons-cradle {
2 --uib-size: 50px;
3 --uib-speed: 1.2s;
4 --uib-color: #474554;
5 position: relative;
6 display: flex;
7 align-items: center;
8 justify-content: center;
9 width: var(--uib-size);
10 height: var(--uib-size);
11}
12
13.newtons-cradle__dot {
14 position: relative;
15 display: flex;
16 align-items: center;
17 height: 100%;
18 width: 25%;
19 transform-origin: center top;
20}
21
22.newtons-cradle__dot::after {
23 content: '';
24 display: block;
25 width: 100%;
26 height: 25%;
27 border-radius: 50%;
28 background-color: var(--uib-color);
29}
30
31.newtons-cradle__dot:first-child {
32 animation: swing var(--uib-speed) linear infinite;
33}
34
35.newtons-cradle__dot:last-child {
36 animation: swing2 var(--uib-speed) linear infinite;
37}
38
39@keyframes swing {
40 0% {
41  transform: rotate(0deg);
42  animation-timing-function: ease-out;
43 }
44
45 25% {
46  transform: rotate(70deg);
47  animation-timing-function: ease-in;
48 }
49
50 50% {
51  transform: rotate(0deg);
52  animation-timing-function: linear;
53 }
54}
55
56@keyframes swing2 {
57 0% {
58  transform: rotate(0deg);
59  animation-timing-function: linear;
60 }
61
62 50% {
63  transform: rotate(0deg);
64  animation-timing-function: ease-out;
65 }
66
67 75% {
68  transform: rotate(-70deg);
69  animation-timing-function: ease-in;
70 }
71}
72