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.
Custom checkbox
CSS, Visual
Creates a styled checkbox with animation on state change.
Image overlay on hover
CSS, Visual
Displays an image overlay effect on hover.
Menu on image hover
CSS, Layout
Displays a menu overlay when the user hovers over the image.
Perspective transform on hover
CSS, Animation
Applies a perspective transform with a hover animation to an element.
Staggered animation
CSS, Animation
Creates a staggered animation for the elements of a list.
Typewriter effect
CSS, Animation
Creates a typewriter effect animation.
Height transition
CSS, Animation
Transitions an element's height from
0toautowhen its height is unknown.Bouncing loader
CSS, Animation
Creates a bouncing loader animation.
Image rotate on hover
CSS, Animation
Creates a rotate effect for the image on hover.
Rotating Card
CSS, Animation
Creates a two sided card which rotates on hover.
Scroll progress bar
CSS, Animation
Creates a progress bar indicating the scroll percentage of the page.
Pulse loader
CSS, Animation
Creates a pulse effect loader animation using the
animation-delayproperty.Hover underline animation
CSS, Animation
Creates an animated underline effect when the user hovers over the text.
Tip: CSS easing variables
CSS, Animation
Learn how to use the
cubic-bezier()class of easing functions and create beautiful animations that stand out.Button border animation
CSS, Animation
Creates a border animation on hover.