1.notification {
2  width: 250px;
3  height: 60px;
4  background: rgb(146, 146, 146);
5  border-radius: 14px;
6  font-size: 2.3em;
7  font-weight: 700;
8  color: black;
9  text-shadow: 2px 2px yellow;
10  text-align: center;
11  display: -webkit-box;
12  display: -ms-flexbox;
13  display: flex;
14  -webkit-box-pack: center;
15  -ms-flex-pack: center;
16  justify-content: center;
17  -webkit-box-align: center;
18  -ms-flex-align: center;
19  align-items: center;
20  gap: 4px;
21}
22
23.notification span {
24  -webkit-animation: levelup 2s ease infinite;
25  animation: levelup 2s ease infinite;
26}
27
28.notification span:nth-child(2) {
29  -webkit-animation-delay: 0.25s;
30  animation-delay: 0.25s;
31}
32
33.notification span:nth-child(3) {
34  -webkit-animation-delay: 0.5s;
35  animation-delay: 0.5s;
36}
37
38.notification span:nth-child(4) {
39  -webkit-animation-delay: 0.75s;
40  animation-delay: 0.75s;
41}
42
43.notification span:nth-child(5) {
44  -webkit-animation-delay: 1s;
45  animation-delay: 1s;
46}
47
48.notification span:nth-child(6) {
49  -webkit-animation-delay: 1.25s;
50  animation-delay: 1.25s;
51}
52
53.notification span:nth-child(7) {
54  -webkit-animation-delay: 1.5s;
55  animation-delay: 1.5s;
56}
57
58.notification span:nth-child(8) {
59  -webkit-animation-delay: 1.75s;
60  animation-delay: 1.75s;
61}
62
63@-webkit-keyframes levelup {
64  0%, 100% {
65    -webkit-transform: translateY(10px);
66    transform: translateY(10px);
67  }
68
69  50% {
70    -webkit-transform: translateY(-10px);
71    transform: translateY(-10px);
72  }
73}
74
75@keyframes levelup {
76  0%, 100% {
77    -webkit-transform: translateY(10px);
78    transform: translateY(10px);
79  }
80
81  50% {
82    -webkit-transform: translateY(-10px);
83    transform: translateY(-10px);
84  }
85}
86