CODEWITHSUNDEEP
css
naveen
naveen

Reputation: 610

Animate text using css

I am trying to animate the text using keyframes in css :

my html code:

@keyframes animate {
  0% {
    content: "Animate"
  }
  50% {
    content: "text using"
  }
  100% {
    content: "CSS!!"
  }
}

.change-text::after {
  animation: animate 5s infinite;
}
<center>
  <p class="change-text">
    Text will change here
  </p>
</center>

But the text is not changing, help me figure out what is wrong with my code?

Upvotes: 4

Views: 341

Answers (2)

Sadik Multani
Sadik Multani

Reputation: 131

You can try this:

Html Code:

<center>
  <p class="change-text">
    Text will change here
    <span class="animated-text"></span>
  </p>
</center>

CSS Code

@keyframes animate{
    0%{
        content : "Enjoy";
    }
    20%{
        content : "animate";
    }
    50%{
        content : "text";
    }
    75%{
        content : "using";
    }
    100%{
        content : "CSS!!";
    }
}
.animated-text::after{
    content: ''; // Need to Add content
    color: red;
    animation : animate 5s infinite;
}

Upvotes: 1

Zuber
Zuber

Reputation: 3473

this is happening because you have not given content property in after. just add content: ""; into to .change-text::after

@keyframes animate{
  0%{
    content : "Animate"
  }
  50%{
    content : "text using"
  }
  100%{
    content : "CSS!!"
  }
}
.change-text::after{
  animation : animate 5s infinite;
  content: ""; // Added 
}
<center>
  <div class="change-text">
    Text will change here
  </div>
</center>

Upvotes: 3

Related Questions