1.typewriter {
2  --blue: #5C86FF;
3  --blue-dark: #275EFE;
4  --key: #fff;
5  --paper: #EEF0FD;
6  --text: #D3D4EC;
7  --tool: #FBC56C;
8  --duration: 3s;
9  position: relative;
10  -webkit-animation: bounce05 var(--duration) linear infinite;
11  animation: bounce05 var(--duration) linear infinite;
12}
13
14.typewriter .slide {
15  width: 92px;
16  height: 20px;
17  border-radius: 3px;
18  margin-left: 14px;
19  transform: translateX(14px);
20  background: linear-gradient(var(--blue), var(--blue-dark));
21  -webkit-animation: slide05 var(--duration) ease infinite;
22  animation: slide05 var(--duration) ease infinite;
23}
24
25.typewriter .slide:before, .typewriter .slide:after,
26.typewriter .slide i:before {
27  content: "";
28  position: absolute;
29  background: var(--tool);
30}
31
32.typewriter .slide:before {
33  width: 2px;
34  height: 8px;
35  top: 6px;
36  left: 100%;
37}
38
39.typewriter .slide:after {
40  left: 94px;
41  top: 3px;
42  height: 14px;
43  width: 6px;
44  border-radius: 3px;
45}
46
47.typewriter .slide i {
48  display: block;
49  position: absolute;
50  right: 100%;
51  width: 6px;
52  height: 4px;
53  top: 4px;
54  background: var(--tool);
55}
56
57.typewriter .slide i:before {
58  right: 100%;
59  top: -2px;
60  width: 4px;
61  border-radius: 2px;
62  height: 14px;
63}
64
65.typewriter .paper {
66  position: absolute;
67  left: 24px;
68  top: -26px;
69  width: 40px;
70  height: 46px;
71  border-radius: 5px;
72  background: var(--paper);
73  transform: translateY(46px);
74  -webkit-animation: paper05 var(--duration) linear infinite;
75  animation: paper05 var(--duration) linear infinite;
76}
77
78.typewriter .paper:before {
79  content: "";
80  position: absolute;
81  left: 6px;
82  right: 6px;
83  top: 7px;
84  border-radius: 2px;
85  height: 4px;
86  transform: scaleY(0.8);
87  background: var(--text);
88  box-shadow: 0 12px 0 var(--text), 0 24px 0 var(--text), 0 36px 0 var(--text);
89}
90
91.typewriter .keyboard {
92  width: 120px;
93  height: 56px;
94  margin-top: -10px;
95  z-index: 1;
96  position: relative;
97}
98
99.typewriter .keyboard:before, .typewriter .keyboard:after {
100  content: "";
101  position: absolute;
102}
103
104.typewriter .keyboard:before {
105  top: 0;
106  left: 0;
107  right: 0;
108  bottom: 0;
109  border-radius: 7px;
110  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
111  transform: perspective(10px) rotateX(2deg);
112  transform-origin: 50% 100%;
113}
114
115.typewriter .keyboard:after {
116  left: 2px;
117  top: 25px;
118  width: 11px;
119  height: 4px;
120  border-radius: 2px;
121  box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
122  -webkit-animation: keyboard05 var(--duration) linear infinite;
123  animation: keyboard05 var(--duration) linear infinite;
124}
125
126@keyframes bounce05 {
127  85%, 92%, 100% {
128    transform: translateY(0);
129  }
130
131  89% {
132    transform: translateY(-4px);
133  }
134
135  95% {
136    transform: translateY(2px);
137  }
138}
139
140@keyframes slide05 {
141  5% {
142    transform: translateX(14px);
143  }
144
145  15%, 30% {
146    transform: translateX(6px);
147  }
148
149  40%, 55% {
150    transform: translateX(0);
151  }
152
153  65%, 70% {
154    transform: translateX(-4px);
155  }
156
157  80%, 89% {
158    transform: translateX(-12px);
159  }
160
161  100% {
162    transform: translateX(14px);
163  }
164}
165
166@keyframes paper05 {
167  5% {
168    transform: translateY(46px);
169  }
170
171  20%, 30% {
172    transform: translateY(34px);
173  }
174
175  40%, 55% {
176    transform: translateY(22px);
177  }
178
179  65%, 70% {
180    transform: translateY(10px);
181  }
182
183  80%, 85% {
184    transform: translateY(0);
185  }
186
187  92%, 100% {
188    transform: translateY(46px);
189  }
190}
191
192@keyframes keyboard05 {
193  5%, 12%, 21%, 30%, 39%, 48%, 57%, 66%, 75%, 84% {
194    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
195  }
196
197  9% {
198    box-shadow: 15px 2px 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
199  }
200
201  18% {
202    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 2px 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
203  }
204
205  27% {
206    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 12px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
207  }
208
209  36% {
210    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 12px 0 var(--key), 60px 12px 0 var(--key), 68px 12px 0 var(--key), 83px 10px 0 var(--key);
211  }
212
213  45% {
214    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 2px 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
215  }
216
217  54% {
218    box-shadow: 15px 0 0 var(--key), 30px 2px 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
219  }
220
221  63% {
222    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 12px 0 var(--key);
223  }
224
225  72% {
226    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 2px 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
227  }
228
229  81% {
230    box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 12px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
231  }
232}