Animate text using css

Question

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?

And what does that mean? What animation are you trying to apply? What's the starting point, what's the end point, what happens in the middle? Where did you get stuck? "I am trying" is not a problem description, so what problem are you facing? — David Thomas
– David Thomas, Commented Sep 14, 2019 at 13:25
Note that the <center> element has been obsolete for a decade or more. — Rob
– Rob, Commented Sep 14, 2019 at 13:42

Zuber · Accepted Answer · 2019-09-14 13:31:12Z

3

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>

answered Sep 14, 2019 at 13:31

Zuber

3,4931 gold badge22 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sadik Multani · Accepted Answer · 2019-09-14 13:39:05Z

1

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;
}

answered Sep 14, 2019 at 13:39

Sadik Multani

1317 bronze badges

Collectives™ on Stack Overflow

Animate text using css

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related