4.6K views
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}
MIT License