30 seconds of CSS

Animation

Click on a snippet's name to view its code.

Bouncing loader

Creates a bouncing loader animation.

Demo

View snippet

Button border animation

Creates a border animation on hover.

Demo

View snippet

Donut spinner

Creates a donut spinner that can be used to indicate the loading of content.

Demo

View snippet

Easing variables

Variables that can be reused for transition-timing-function properties, more powerful than the built-in ease, ease-in, ease-out and ease-in-out.

Demo
Hover

View snippet

Height transition

Transitions an element's height from 0 to auto when its height is unknown.

Demo
Hover me to see a height transition.
content

View snippet

Hover shadow box animation

Creates a shadow box around the text when it is hovered.

Demo

Box it!

View snippet

Hover underline animation

Creates an animated underline effect when the text is hovered over.

Credit: https://flatuicolors.com/

Demo

Hover this text to see the effect!

View snippet