1.notification {
2  position: relative;
3  font-family: "Lucida Console", "Courier New", monospace;
4  font-weight: 900;
5  letter-spacing: 5px;
6  text-transform: uppercase;
7}
8
9.start {
10  font-size: 20px;
11  letter-spacing: 3px;
12  text-shadow: 1px 1px 0 #000,
13    -1px -1px 0 #000,
14    1px -1px 0 #000,
15    -1px 1px 0 #000;
16  animation: animate4 5s forwards infinite ease-in-out;
17}
18
19.ribbon-content {
20  font-size: 35px;
21  text-shadow: 1.5px 1.5px 0 #680638,
22    -1.5px -1.5px 0 #680638,
23    1.5px -1.5px 0 #680638,
24    -1.5px 1.5px 0 #680638;
25}
26
27.ribbon {
28  position: relative;
29  width: 300px;
30  height: 50px;
31  line-height: 50px;
32  background-color: #CC014D;
33  color: #fff;
34  text-align: center;
35  font-size: 20px;
36}
37
38.ribbon::before, .ribbon::after {
39  content: '';
40  position: absolute;
41  top: 20px;
42  border: 25px solid #DB0F5A;
43  z-index: -1;
44}
45
46.ribbon::before {
47  left: -30px;
48  border-left-color: transparent;
49}
50
51.ribbon::after {
52  right: -30px;
53  border-right-color: transparent;
54}
55
56.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
57  content: '';
58  position: absolute;
59  border-style: solid;
60  bottom: -20px;
61}
62
63.ribbon .ribbon-content:before {
64  left: 0;
65  border-width: 0 20px 20px 0;
66  border-color: transparent #6B043A transparent transparent;
67}
68
69.ribbon .ribbon-content:after {
70  right: 0;
71  border-width: 20px 20px 0 0;
72  border-color: #6B043A transparent transparent transparent;
73}
74
75.star svg {
76  width: 100px;
77  height: 100px;
78}
79
80.star {
81  position: absolute;
82}
83
84.star1 {
85  top: -85px;
86  left: 0;
87  transform: rotate(-15deg);
88  animation: animate1 5s forwards infinite ease-in-out;
89}
90
91.star2 {
92  top: -100px;
93  left: 50%;
94  transform: translate(-50%);
95  animation: animate2 5s forwards infinite ease-in-out;
96}
97
98.star3 {
99  top: -85px;
100  left: 100%;
101  transform: translateX(-100%) rotate(15deg);
102  animation: animate3 5s forwards infinite ease-in-out;
103}
104
105@keyframes animate1 {
106  0% {
107    transform: rotate(-15deg) translateY(0);
108  }
109
110  25% {
111    transform: rotate(-15deg) translateY(10px);
112  }
113
114  50% {
115    transform: rotate(-15deg) translateY(0px);
116  }
117
118  75% {
119    transform: rotate(-5deg);
120  }
121
122  100% {
123    transform: rotate(-15deg);
124  }
125}
126
127@keyframes animate3 {
128  0% {
129    transform: translateX(-100%) translateY(0) rotate(15deg);
130  }
131
132  25% {
133    transform: translateX(-100%) translateY(10px) rotate(15deg);
134  }
135
136  50% {
137    transform: translateX(-100%) translateY(0) rotate(15deg);
138  }
139
140  75% {
141    transform: translateX(-100%) rotate(5deg);
142  }
143
144  100% {
145    transform: translateX(-100%) rotate(15deg);
146  }
147}
148
149@keyframes animate2 {
150  0% {
151    transform: translate(-50%) translateY(0);
152  }
153
154  25% {
155    transform: translate(-50%) translateY(10px);
156  }
157
158  50% {
159    transform: translate(-50%) translateY(0px) scale(1);
160  }
161
162  75% {
163    transform: translate(-50%) scale(1.1);
164  }
165
166  100% {
167    transform: translate(-50%) scale(1);
168  }
169}
170
171@keyframes animate4 {
172  50% {
173    transform: scale(1);
174  }
175
176  75% {
177    transform: scale(1.1);
178  }
179
180  100% {
181    transform: scale(1);
182  }
183}