tada.css

TLDR

The tada.css file contains CSS code that defines an animation called tada and a class called .tada. The animation creates a tada effect by scaling and rotating an element at specific keyframe percentages.

Classes

.tada

The .tada class applies the tada animation to an element. When the animation is applied, the element will scale and rotate according to the specified keyframe percentages in the animation.

Animation

@keyframes tada

The tada animation is defined using @keyframes rule. It consists of several keyframes that control the scaling and rotating of an element.

The keyframes are defined as follows:

• from: Represents the initial state of the element with no scaling or rotating.
• 10%, 20%: Scales the element to 0.9 times its original size and rotates it clockwise by -3 degrees.
• 30%, 50%, 70%, 90%: Scales the element to 1.1 times its original size and rotates it clockwise by 3 degrees.
• 40%, 60%, 80%: Scales the element to 1.1 times its original size and rotates it counterclockwise by -3 degrees.
• to: Represents the final state of the element, back to its original size with no scaling or rotating.

The transform property is used to apply scaling and rotation transformations to the element.

@keyframes tada {
  from {
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

.tada {
  animation-name: tada;
}