1.notification {
2  display: flex;
3  width: 0;
4  background: #ddd;
5  border-radius: 10px;
6  animation: slideIn 1s ease-in-out 1.25s forwards;
7}
8
9.notification-info {
10  display: inline-flex;
11  overflow: hidden;
12  background-color: #181818;
13  color: #fff;
14  width: 100%;
15  border-radius: 12px 8px 8px 12px;
16  padding-left: 16px;
17  align-items: center;
18}
19
20.notification-text {
21  opacity: 0;
22  padding: 10px 8px;
23  white-space: nowrap;
24  animation: textInfo 1s ease-in-out 1.5s forwards;
25}
26
27.highlight {
28  color: #ffc300;
29}
30
31.box-avatar {
32  background-color: #181818;
33  padding: 6px;
34  width: 4.5em;
35  height: 4.5em;
36  border-radius: 50%;
37  margin-right: -20px;
38  box-shadow: 6.2px 3.1px 38.2px -6px rgba(0, 0, 0, 0.2), 63px 32px 176px -6px rgba(0, 0, 0, 0.1);
39  z-index: 1;
40}
41
42.avatar {
43  background-color: #FDA203;
44  padding: .6em;
45  border-radius: 50%;
46}
47
48.avatar-icon {
49  width: 100%;
50  height: 100%;
51  fill: white;
52  animation: grow 2s ease-in-out 3;
53}
54
55/*Animations*/
56@keyframes slideIn {
57  0% {
58    width: 0;
59    padding: 2px;
60  }
61
62  100% {
63    width: 250px;
64    padding: 2px;
65  }
66}
67
68@keyframes textInfo {
69  0% {
70    opacity: 0%;
71    margin-left: -20em;
72  }
73
74  100% {
75    opacity: 100%;
76    margin-left: 0;
77  }
78}
79
80@keyframes grow {
81  0% {
82    transform: scale(100%) translateY(0%);
83  }
84
85  50% {
86    transform: scale(100%) translateY(-10%);
87  }
88
89  100% {
90    transform: scale(100%) translateY(0%);
91  }
92}