Text Reveal Animation Using CSS

This code creates a text reveal animation using CSS. It reveals text gradually for visual appeal. The animation reveals text with strokes and fill colors. It helps add dynamic text effects to web content.

You can use this code on any webpage to add captivating text animations. It enhances visual appeal and engagement. Perfect for showcasing titles, headers, or important messages on your website.

How to Create Text Reveal Animation Using CSS

1. Begin by creating an HTML file. Inside the <body> tag, define a container with a class name, such as <div class="hero">. Within this container, add an <h1> element with a class of “text-reveal”. Inside the <h1> element, include the text you want to reveal within <span> tags.

<div class="hero">
 <h1 class="text-reveal">
    <span>TEXT REVEAL</span>
    <span aria-hidden="true">TEXT REVEAL</span>
  </h1>
</div>

2. In your CSS file, style the <h1> element and define the animation properties for the text reveal effect. You can customize the font family, size, alignment, and colors according to your preference. The key part is to define the animation properties using keyframes for each text reveal effect.

Adjust the animation duration, delay, stroke colors, fill colors, and other parameters as needed to achieve the desired text reveal effect. Make sure to target the appropriate elements and define the animation behavior using keyframes.

h1 {
  font-family: system-ui, sans-serif;
  font-size: 10vw;
  text-align: center;
}

.text-reveal {
  --animation-duration: 2s;
  --animation-delay: 1s;
  
  --1-fill-color: transparent;
  --1-stroke-color: hotpink;
  --1-stroke-size: 1px;
  
  --2-fill-color: hotpink;
  --2-stroke-color: white;
  --2-stroke-size: 1px;
 
  --lines-color: white;
  --lines-size: 2px;
  
  --text-padding: 0.5rem 1rem;
  
  display: grid;
  
  &::after, & > span { 
    grid-area: 1/1;
    animation: var(--animation-name) var(--animation-duration) ease-in-out var(--animation-delay) forwards }
  
  > span {
    padding: var(--text-padding);
    color: var(--color);
    opacity: 0; 
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-image: var(--mask-image);
    -webkit-mask-composite: var(--mask-composite-webkit);
    -webkit-mask-size: var(--mask-size);
    
    mask-repeat: no-repeat;
    mask-position: center;
    mask-image: var(--mask-image);
    mask-composite: var(--mask-composite);
    
    &:nth-child(1) {
      -webkit-text-stroke: var(--1-stroke-size) var(--1-stroke-color);
      --color: var(--1-fill-color);
      --mask-image: linear-gradient(black 0 0), linear-gradient(black 0 0);
      --mask-composite-webkit: destination-out;
      --mask-composite: exclude;
      --animation-name: text-reveal-1;
      
    }
    &:nth-child(2){
      -webkit-text-stroke: var(--2-stroke-size) var(--2-stroke-color);
      --color: var(--2-fill-color);
      --mask-image: linear-gradient(black 0 0);
      --animation-name: text-reveal-2;
    }

  }
  &::after{
    content: "";
    z-index: 2;
    border: var(--lines-size) solid var(--lines-color);
    border-block: none;
    width: 100%;
    justify-self: center;
    opacity: 0; 
    --animation-name: text-reveal-lines;
  }
}
@keyframes text-reveal-1 { 
  0%, 100% { -webkit-mask-size: 100% 100%, 100%; mask-size: 100% 100%, 100%; opacity: 1 }
  50% { -webkit-mask-size: 0% 100%, 100%; mask-size: 100% 100%, 100% } 
}
@keyframes text-reveal-2 { 
  0%, 50% { -webkit-mask-size: 0% 100%; mask-size: 0% 100%; opacity: 1 }
  100% { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; opacity: 1  } 
}
@keyframes text-reveal-lines { 
  5%, 95% { opacity: 1 } 
  50% { width: 0 } 
}


*, *:before, *::after { margin: 0; padding: 0; box-sizing: border-box }
.hero { 
  min-height: 100vh;
  background-color: black;
  display: grid;
  place-items: center;
}

Feel free to explore additional CSS properties and techniques to enhance the text reveal effect further. You can add transitions, adjust timing functions, or combine multiple animations for a more dynamic effect.

That’s all! hopefully, you have successfully created Text Reveal Animation on your website. If you have any questions or suggestions, feel free to comment below.

Similar Code Snippets:

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.

Code Snippet:	text reveal
Author:	Mark Boots
Published:	March 21, 2024
Last Updated:	March 21, 2024
Downloads:	294

License:	MIT
Edit Code online:	View on CodePen

How to Create Text Reveal Animation Using CSS

Similar Code Snippets:

Leave a Comment Cancel reply