Text Reveal Animation Using CSS

Text Reveal Animation Using CSS
Code Snippet:text reveal
Author: Mark Boots
Published: March 21, 2024
Last Updated: March 21, 2024
Downloads: 163
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X