1.container {
2  display: flex;
3  align-items: center;
4  justify-content: center;
5  height: 350px;
6  background: #444;
7  border-radius: 10px;
8}
9
10.card {
11  position: relative;
12  background: #333;
13  width: 250px;
14  height: 350px;
15  border-radius: 10px;
16  padding: 2rem;
17  color: #aaa;
18  box-shadow: 0 .25rem .25rem rgba(0,0,0,0.2),
19    0 0 1rem rgba(0,0,0,0.2);
20  overflow: hidden;
21}
22
23.card__image-container {
24  margin: -2rem -2rem 1rem -2rem;
25}
26
27.card__line {
28  opacity: 0;
29  animation: LineFadeIn .8s .8s forwards ease-in;
30}
31
32.card__image {
33  opacity: 0;
34  animation: ImageFadeIn .8s 1.4s forwards;
35}
36
37.card__title {
38  color: white;
39  margin-top: 35px;
40  margin-bottom: 10px;
41  font-weight: 800;
42  letter-spacing: 0.01em;
43}
44
45.card__content {
46  margin-top: -1rem;
47  opacity: 0;
48  animation: ContentFadeIn .8s 1.6s forwards;
49}
50
51.card__svg {
52  position: absolute;
53  left: 0;
54  top: 115px;
55}
56
57@keyframes LineFadeIn {
58  0% {
59    opacity: 0;
60    d: path("M 0 300 Q 0 300 0 300 Q 0 300 0 300 C 0 300 0 300 0 300 Q 0 300 0 300 ");
61    stroke: #fff;
62  }
63
64  50% {
65    opacity: 1;
66    d: path("M 0 300 Q 50 300 100 300 Q 250 300 350 300 C 350 300 500 300 650 300 Q 750 300 800 300");
67    stroke: #888BFF;
68  }
69
70  100% {
71    opacity: 1;
72    d: path("M -2 100 Q 50 200 100 250 Q 250 400 350 300 C 400 250 550 150 650 300 Q 750 450 802 400");
73    stroke: #545581;
74  }
75}
76
77@keyframes ContentFadeIn {
78  0% {
79    transform: translateY(-1rem);
80    opacity: 0;
81  }
82
83  100% {
84    transform: translateY(0);
85    opacity: 1;
86  }
87}
88
89@keyframes ImageFadeIn {
90  0% {
91    transform: translate(-.5rem, -.5rem) scale(1.05);
92    opacity: 0;
93    filter: blur(2px);
94  }
95
96  50% {
97    opacity: 1;
98    filter: blur(2px);
99  }
100
101  100% {
102    transform: translateY(0) scale(1.0);
103    opacity: 1;
104    filter: blur(0);
105  }
106}