Create text background animation Using CSS

Learn Text Reveal Animation CSS And Text Background Animation For Website Using HTML And CSS.

In this post we will learn to create a Text animation using CSS. Here you can see an animation that reveals the text characters one by one. So this is the text reveal animation using CSS. We will also create one more animation which is text background animation, here you can see one text with only stroke, there is no background color for the text, and the background color comes in the text from the left side to the right then removes background color with backward animation.

HTML:

<p>Deshamarbd</p>

CSS:

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
 background: #0F2027;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

p{
  text-transform: uppercase;
  font-family: sans-serif;
  font-weight: 800;
  font-size: 6em;
  -webkit-text-stroke: 1px #fff;
  color: transparent;
  background: #fff; 
  background: -webkit-linear-gradient(to right, #fff, #fff); 
  background: linear-gradient(to right, #fff, #fff); 
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  background-position: -800px 0;
  animation: backcolor 5s alternate infinite;
}

@keyframes backcolor{
  100%{
    background-position: 0px 0;
  }
}

Preview:

See the Pen Untitled by Rashedul Hasan (@rhsuman) on CodePen.

RH Suman
RH Suman
Articles: 64

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply