Collection of free HTML and CSS reveal animation examples from codepen and other resources.

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: -