Card by FWDJc

1.one-div {
2  width: 230px;
3  height: 50px;
4  border-radius: 50%;
5  position: relative;
6  animation: bounce 5s infinite;
7}
8
9.one-div::before {
10  content: 'DIV';
11  position: absolute;
12  display: block;
13  left: 12%;
14  bottom: 55%;
15  color: green;
16  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
17  font-size: 6em;
18  font-weight: 900;
19  font-style: italic;
20  animation: div-color-change 5s infinite;
21}
22
23.one-div::after {
24  content: 'DIVISION';
25  position: absolute;
26  top: 27%;
27  left: 18%;
28  color: #212121;
29  font-size: 1em;
30  font-weight: 800;
31  letter-spacing: 10px;
32  z-index: 1;
33}
34
35@keyframes bounce {
36  0% {
37    background-color: red;
38    transform: translateX(0) translateY(100px);
39  }
40
41  25% {
42    background-color: blue;
43    transform: translateX(100px) translateY(0);
44  }
45
46  55% {
47    background-color: green;
48    transform: translateX(0) translateY(-100px);
49  }
50
51  75% {
52    background-color: yellow;
53    transform: translateX(-100px) translateY(0);
54  }
55
56  100% {
57    background-color: purple;
58    transform: translateX(0) translateY(100px);
59  }
60}
61
62@keyframes div-color-change {
63  0% {
64    color: red;
65  }
66
67  25% {
68    color: blue;
69  }
70
71  55% {
72    color: green;
73  }
74
75  75% {
76    color: yellow;
77  }
78
79  100% {
80    color: purple;
81  }
82}