headShake.css

TLDR

This file defines an animation called "headShake" and a CSS class called ".headShake". The animation moves an element back and forth while slightly rotating it.

Methods

N/A

Classes

headShake

This CSS class applies the "headShake" animation to an element. The animation moves the element back and forth using the transform property and slight rotation using the rotateY property. The animation timing function is set to ease-in-out.

@keyframes headShake {
  0% {
    transform: translateX(0);
  }

  6.5% {
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    transform: translateX(0);
  }
}

.headShake {
  animation-timing-function: ease-in-out;
  animation-name: headShake;
}