CSS Text Reveal Animation

CSS Text Reveal Animation
Code Snippet:CSS TEXT REVEALING ANIMATION
Author: Nooray Yemon
Published: January 21, 2024
Last Updated: January 22, 2024
Downloads: 1,128
License: MIT
Edit Code online: View on CodePen
Read More

This pure CSS code snippet helps you to create text reveal animation. It uses CSS3 to gradually reveal and animate text, bringing your content to life. The core method, “reveal,” animates text elements, making them appear and disappear seamlessly. This code is perfect for adding eye-catching animations to your website’s text content.

You can use this code in your website’s landing page to engage visitors with visually appealing text animations. It enhances user experience by creating eye-catching and interactive content. This code is a simple way to make your website more engaging and memorable.

How to Create CSS Text Reveal Animation

1. First, you need to set up your HTML structure. You can place your text inside HTML elements that you want to animate. In the provided code, we have used <div> and <span> elements to enclose our text.

<div class="f-div">Escape </div> 
<div class="l-div"> 
  <span> into amazing experiences</span>
</div>


<p>a css3 animation demo</p>

2. Now, it’s time to incorporate the CSS code into your project. The CSS code contains keyframes and styles necessary for the animations. You can either link to an external CSS file or include it within a <style> tag in your HTML document.

@import url('https://fonts.googleapis.com/css?family=Roboto:300');

body{
  display: block !important;
  text-align:center;
  background:linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%) !important;
  color:#555;
  font-family:'Roboto';
  font-weight:300;
  font-size:32px;
  height:100vh;
  overflow:hidden;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-transform: translate3d(0,0,0);
}

div {
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
}

.f-div{    
  animation: showup 7s infinite;
}

.l-div {
  width:0px;
  animation: reveal 7s infinite;
}

.l-div span {
  margin-left:-355px;
  animation: slidein 7s infinite;
}

@keyframes showup {
    0% {opacity:0;}
    20% {opacity:1;}
    80% {opacity:1;}
    100% {opacity:0;}
}

@keyframes slidein {
    0% { margin-left:-800px; }
    20% { margin-left:-800px; }
    35% { margin-left:0px; }
    100% { margin-left:0px; }
}

@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:355px;}
    80% {opacity:1;}
    100% {opacity:0;width:355px;}
}


p {
  font-size:12px;
  color:#999;
  margin-top:200px;
}

You can further customize the animations by modifying the CSS code. Adjust the animation durations, delays, or colors to match your website’s style and preferences. Experiment and make it uniquely yours!

That’s all! hopefully, you have successfully created Text Reveal Animation using CSS. 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