|
280 | 280 | animation-name: shake; |
281 | 281 | } |
282 | 282 |
|
| 283 | +@-webkit-keyframes headShake { |
| 284 | + 0 { |
| 285 | + -webkit-transform: translateX(0); |
| 286 | + transform: translateX(0); |
| 287 | + } |
| 288 | + |
| 289 | + 6.5% { |
| 290 | + -webkit-transform: translateX(-6px) rotateY(-9deg); |
| 291 | + transform: translateX(-6px) rotateY(-9deg); |
| 292 | + } |
| 293 | + |
| 294 | + 18.5% { |
| 295 | + -webkit-transform: translateX(5px) rotateY(7deg); |
| 296 | + transform: translateX(5px) rotateY(7deg); |
| 297 | + } |
| 298 | + |
| 299 | + 31.5% { |
| 300 | + -webkit-transform: translateX(-3px) rotateY(-5deg); |
| 301 | + transform: translateX(-3px) rotateY(-5deg); |
| 302 | + } |
| 303 | + |
| 304 | + 43.5% { |
| 305 | + -webkit-transform: translateX(2px) rotateY(3deg); |
| 306 | + transform: translateX(2px) rotateY(3deg); |
| 307 | + } |
| 308 | + |
| 309 | + 50% { |
| 310 | + -webkit-transform: translateX(0); |
| 311 | + transform: translateX(0); |
| 312 | + } |
| 313 | +} |
| 314 | + |
| 315 | +@keyframes headShake { |
| 316 | + 0 { |
| 317 | + -webkit-transform: translateX(0); |
| 318 | + transform: translateX(0); |
| 319 | + } |
| 320 | + |
| 321 | + 6.5% { |
| 322 | + -webkit-transform: translateX(-6px) rotateY(-9deg); |
| 323 | + transform: translateX(-6px) rotateY(-9deg); |
| 324 | + } |
| 325 | + |
| 326 | + 18.5% { |
| 327 | + -webkit-transform: translateX(5px) rotateY(7deg); |
| 328 | + transform: translateX(5px) rotateY(7deg); |
| 329 | + } |
| 330 | + |
| 331 | + 31.5% { |
| 332 | + -webkit-transform: translateX(-3px) rotateY(-5deg); |
| 333 | + transform: translateX(-3px) rotateY(-5deg); |
| 334 | + } |
| 335 | + |
| 336 | + 43.5% { |
| 337 | + -webkit-transform: translateX(2px) rotateY(3deg); |
| 338 | + transform: translateX(2px) rotateY(3deg); |
| 339 | + } |
| 340 | + |
| 341 | + 50% { |
| 342 | + -webkit-transform: translateX(0); |
| 343 | + transform: translateX(0); |
| 344 | + } |
| 345 | +} |
| 346 | + |
| 347 | +.headShake { |
| 348 | + -webkit-animation-timing-function: ease-in-out; |
| 349 | + animation-timing-function: ease-in-out; |
| 350 | + -webkit-animation-name: headShake; |
| 351 | + animation-name: headShake; |
| 352 | +} |
| 353 | + |
283 | 354 | @-webkit-keyframes swing { |
284 | 355 | 20% { |
285 | 356 | -webkit-transform: rotate3d(0, 0, 1, 15deg); |
|
0 commit comments