CSS Animation Example: The Jelly Wobble

"The Jelly Wobble" provides playful, elastic feedback when a user clicks a button, making the interface feel more tactile and responsive.

This effect is created by animating the transform property across multiple keyframes triggered on the :active pseudo-class. By quickly shifting between different scale(X, Y) values, we simulate the squishing and stretching of a physical object.

Here is the code to create the Jelly Wobble animation.

View Output

Accessibility Considerations

While the above animation is quite subtle, rapid movement can be triggering for some users. We can respect the user's system preferences by using the prefers-reduced-motion media query. This detects if the user has configured their operating system or browser to minimize non-essential motion.

Here we swap out the complex keyframe animation for a simple, static scale-down effect when the button is pressed by a user who prefers reduced motion.


@media (prefers-reduced-motion: reduce) {
    .jelly-wobble-btn:active {
        animation: none;
        transform: scale(0.95);
    }
}