CSS Animations

The CSS snippet collection contains utilities and interactive examples for CSS3. It includes modern techniques for creating commonly-used layouts, styling and animating elements, as well as snippets for handling user interactions.

Button swing animation
Creates a swing animation on focus.
CSS, Animation · May 24, 2021
Button fill animation
Creates a fill animation on hover.
CSS, Animation · Apr 2, 2021
Button grow animation
Creates a grow animation on hover.
CSS, Animation · May 24, 2021
Button shrink animation
Creates a shrink animation on hover.
CSS, Animation · May 24, 2021
Pulse loader
Creates a pulse effect loader animation using the animation-delay property.
CSS, Animation · Oct 13, 2021
Shake on invalid input
Creates a shake animation on invalid input.
CSS, Animation · Jul 31, 2022
Hover underline animation
Creates an animated underline effect when the user hovers over the text.
CSS, Animation · Oct 11, 2021
Tip: CSS easing variables
Learn how to use the cubic-bezier() class of easing functions and create beautiful animations that stand out.
CSS, Animation · Jun 12, 2021
Tip: The perfect duration for CSS transitions
Learn how to make your CSS transitions feel perfect when users interact with elements on the page with this simple tip.
CSS, Interactivity · Jun 12, 2021
Donut spinner
Creates a donut spinner that can be used to indicate the loading of content.
CSS, Animation · Oct 13, 2021
Zoom in zoom out animation
Creates a zoom in zoom out animation.
CSS, Animation · Oct 13, 2021

1 2