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

    Creates a styled checkbox with animation on state change.

    CSS, Visual · Oct 11, 2021

  • Custom radio button

    Creates a styled radio button with animation on state change.

    CSS, Visual · Nov 16, 2022

  • Shifting Card

    Creates a card that shifts on hover.

    CSS, Animation · Dec 14, 2022

  • Image overlay on hover

    Displays an image overlay effect on hover.

    CSS, Visual · Oct 11, 2021

  • Menu on image hover

    Displays a menu overlay when the user hovers over the image.

    CSS, Layout · Oct 11, 2021

  • Alternating text

    Creates an alternating text animation.

    CSS, Animation · May 25, 2023

  • Perspective transform on hover

    Applies a perspective transform with a hover animation to an element.

    CSS, Animation · May 17, 2021

  • Staggered animation

    Creates a staggered animation for the elements of a list.

    CSS, Animation · Oct 11, 2021

  • Typewriter effect

    Creates a typewriter effect animation.

    CSS, Animation · May 24, 2021

  • Height transition

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

    CSS, Animation · Dec 30, 2020

  • Squiggle link hover effect

    Creates a squiggle effect when hovering over a link.

    CSS, Animation · Jan 10, 2023

  • Bouncing loader

    Creates a bouncing loader animation.

    CSS, Animation · Oct 11, 2021

  • Image rotate on hover

    Creates a rotate effect for the image on hover.

    CSS, Animation · Oct 11, 2021

  • Rotating Card

    Creates a two sided card which rotates on hover.

    CSS, Animation · Mar 30, 2021

  • Scroll progress bar

    Creates a progress bar indicating the scroll percentage of the page.

    CSS, Animation · Oct 13, 2021

1 2