Attention
Tada Animation
Scales and wiggles as a small celebration.
Opens with this animation loaded. Nothing is uploaded — the scene travels in the link.
.tada {
transform: translate3d(165px, 137px, 0);
width: 150px;
height: 46px;
background: #6366f1;
border-radius: 999px;
color: #ffffff;
font-size: 15px;
font-weight: 600;
animation: tada-anim 1000ms linear 0ms infinite both;
will-change: transform, opacity;
}
@keyframes tada-anim {
0% {
transform: translate3d(165px, 137px, 0);
animation-timing-function: ease-in-out;
}
10% {
transform: translate3d(165px, 137px, 0) rotate(-3deg) scale(0.9, 0.9);
animation-timing-function: ease-in-out;
}
30% {
transform: translate3d(165px, 137px, 0) rotate(3deg) scale(1.1, 1.1);
animation-timing-function: ease-in-out;
}
50% {
transform: translate3d(165px, 137px, 0) rotate(-3deg) scale(1.1, 1.1);
animation-timing-function: ease-in-out;
}
70% {
transform: translate3d(165px, 137px, 0) rotate(3deg) scale(1.1, 1.1);
animation-timing-function: ease-in-out;
}
90% {
transform: translate3d(165px, 137px, 0) rotate(-3deg) scale(1.1, 1.1);
animation-timing-function: ease-in-out;
}
100% {
transform: translate3d(165px, 137px, 0);
}
}
@media (prefers-reduced-motion: reduce) {
.tada {
animation: none;
transition: none;
}
}Why it is built this way
Success states, not idle loops. Anything combining scale and rotation reads as a reaction to something the user did, and repeating it on a loop drains that meaning quickly.
What it animates
3 properties across 1 CSS declaration. The bar shows when each one is moving.
transformtransformtransformWhat it costs to run
Rotate, scale x and scale y is handled by the compositor: no layout, no repaint, and the work can run off the main thread. This is the cheap end of CSS animation, which is why it stays smooth on a slow phone where other properties will not.
It runs for 1.00s across 17 keyframe stops, with every property moving over the same window.
One curve throughout: Ease In Out on a button. Keeping a single easing across every property is what makes a multi-property animation read as one movement rather than several things happening at once.
Accessibility
Nothing here hides content — rotate, scale x and scale y move over 1.00s and the element is visible throughout. The exported prefers-reduced-motion guard still silences it, which matters most for the looping ones: motion that never stops is the kind that makes people feel unwell.