Collection of free HTML and CSS reveal animation examples from Codepen, GitHub and other resources. Update of January 2022 collection. 9 new items.

Related Articles:

  1. jQuery Reveal Animations

Author

  • Samritha S

Links

Made with

  • HTML / CSS

About a code

Image Reveal - Noise

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Silvestar Bistrović

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Hero Image Reveal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Zach Saucier

Links

Made with

  • HTML / CSS (SCSS)

About a code

Text Clip Heading Reveal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Ritika Agrawal

Links

Made with

  • HTML / CSS

About a code

Text Split and Reveal Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Amit Sheen

Links

Made with

  • HTML / CSS (SCSS)

About a code

Click to open...

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Josetxu

Links

Made with

  • HTML / CSS

About a code

Hide/Reveal Useful Info - Pure CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • coder787

Links

Made with

  • HTML / CSS

About a code

3D CSS Spoiler Reveal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • JT

Links

Made with

  • HTML / CSS

About a code

Trivia Hide/Reveal CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Jhey

Links

Made with

  • HTML (Pug) / CSS (Stylus)

About a code

CSS Image Reveal with filter & clip-path

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Aniket Kudale

Links

Made with

  • HTML / CSS

About a code

Reveal Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: bootstrap.css

Author

  • Jhey

Links

Made with

  • HTML / CSS (Stylus)

About a code

Pure CSS Glitchy Text Reveal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Nirajan Basnet

Links

Made with

  • HTML / CSS (SCSS)

About a code

Block Reveal Effect HTML and CSS

This is just a sample of how we can create block reveal effect with just only with HTML and CSS animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Kaio Almeida

Links

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS FadeIn Text with Bars

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Andrés Sánchez

Links

Made with

  • HTML / CSS

About a code

CSS Text Reveal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Dmitrij

Links

Made with

  • HTML / CSS

About a code

Block Reveal Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Nooray Yemon

Links

Made with

  • HTML / CSS

About a code

CSS Text Revealing Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Eslam Adel

Links

Made with

  • HTML / CSS

About a code

Block Reveal Effects

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Mattia Astorino

Links

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Text Reveal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Tiffany Stoik

Links

Made with

  • HTML (Haml) / CSS (SCSS)

About a code

Hover Reveal Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Dudley Storey

Links

Made with

  • HTML / CSS

About a code

"Scribble" Image Reveal with SVG & Blend Modes

Uses CSS animation, SVG stroke-array and blend modes to reveal content.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • David Leininger

Links

Made with

  • HTML / CSS (SCSS)

About a code

Text Reveal on Hover: Flip Down

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Mike Aparicio

Links

Made with

  • HTML / CSS

About a code

Reveal Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Derek Wheelden

Links

Made with

  • HTML / CSS (SCSS)

About a code

Circular Reveal

Trying to make a CSS-only circular hide/reveal. Seems a little element-heavy, but you can't animate pseudo elements.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -