Question 44319 in Html Question posted in
Some basic documentation can be found here.

How can I change text in a loop with CSS? – Html

I’m trying to use HTML5/CSS to make text that will change using a list of available phrases.

As in at first it could say "Hello", and then it will change to say "Hello 2", etc.

Have looked up and reworded it many times, I can’t seem to find anything for what I’m looking for.

Tags:

2

Answers


  1. 0 
    .yourClass {
    visibility: hidden;
    position: relative;
}

.yourClass:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "The world is so beautiful!";
}
    <div class="yourClass">Hello World!</div>
    Login or Signup to reply.
  2. 0

    Based on your comment, I implements keyframes that changes content of the element with every 5s.

    If you want to add more detail on your animation, please check out animation

    @keyframes change-text {
  0% {
    content: "Hello";
  }
  33.33% {
    content: "Hello 2";
  }
  66.66% {
    content: "Hello 3";
  }
  100% {
    content: "Hello 4";
  }
}

.text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.text {
  font-size: 2rem; 
}
.text::after {
  display: block;
  content: "Hello";
/* animation-duration = number of keyframes * duration per keyframe */
  animation: change-text 20s infinite;
}
    <div class="text-container">
  <div class="text"></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search