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;
}