animation of characters to be displayed using keyframe

"I would like to change the characters displayed on the box with the keyframe animation to ""A"→"B"→"C"→"D"->E", but I don't know how to change the text itself from the keyframe of css

<body>
  <p>A->B->c->D</p>
  <button onclick="start()">start</button>
  <div class="box" id="b">here!</div>
</body>

I don't know from the way of thinking.
Should I code the characters after onclick start with jquery?
Should I just array it?

.box{
  padding-top —30px;
  width —200px;
  height —80px;
  background: #ecc;
  font-weight:bold;
  font-size: 250%;
  text-align:center;
  animation-name:c;
  animation-duration:3s;
  animation-timin-function:ease-in;
  animation-delay:1s;
  animation-fill-mode:both;
  - webkit-animation: a 3sease-in 1s both;
}

I would like to change the keyframe text itself as shown in the code below.
(Image)

.c{
  @keyframesc{
    0% {
      [text:A]
    }
    25% {
      [text:B]
    }
    50% {
      [text:C]
    }
    75% {
      [text:D]
    }
    100% {
      [text:E]
    }
  }
  @-webkit-keyframesc{
    0% {
      [text:A]
    }
    25% {
      [text:B]
    }
    50% {
      [text:C]
    }
    75% {
      [text:D]
    }
    100% {
      [text:E]
    }
  }
}

jquery css

2022-09-30 20:47

2 Answers

CSS is a language for specifying the style of web pages, so you cannot change the content by default.

If you want to create an animation that changes characters to "A" → "B" → "C", you must have as many elements as you want.

<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>

After that, position: absolute; superimposes each element and uses animation-delay to shift the timing to start the animation to complete the animation of the changing characters.

.animate div{
  width: 100px;
  height —100px;
  font-size: 100px;
  background-color:red;
  text-align:center;
  opacity: 0;
  position:absolute;
  -webkit-animation-name:example;
  /* Chrome, Safari, Opera*/
  - webkit-animation-duration:4s;
  /* Chrome, Safari, Opera*/
  - webkit-animation-iteration-count:infinite;
  animation-name —example;
  animation-duration: 4s;
  animation-iteration-count:infinite;
}

.animate div:nth-child(1){
  background-color:red;
  - webkit-animation-delay:1s;
  animation-delay:1s;
}

.animate div:nth-child(2){
  background-color:blue;
  - webkit-animation-delay:2s;
  animation-delay:2s;
}

.animate div:nth-child(3){
  background-color:green;
  - webkit-animation-delay:3s;
  animation-delay:3s;
}

.animate div:nth-child(4){
  background-color: yellow;
  - webkit-animation-delay:4s;
  animation-delay:4s;
}


/* Chrome, Safari, Opera*/

@-webkit-keyframes example {
  0% {
    opacity: 0;
  }
  25% {
    opacity:1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}


/* Standard syntax*/

@keyframesexample{
  0% {
    opacity: 0;
  }
  25% {
    opacity:1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

<div class='animate'>
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

One thing to note about the sample above URL is that if the number of elements changes, the percentage balance of animation keyframes must also change.

2022-09-30 20:47

Use steps for animation-timing-function when you want discontinuous animation.
You can use it like a cartoon.

p{
  font-size:5em;
  width:1em;
  height:1em;
  line-height:1;
  white-space:nowrap;
  overflow — hidden;
  background-color:pink;
  margin —0.5em auto;
  animation —moji 5s steps (5, end) infinite;
}
@keyframesmoji{
  100% {
    text-indent:-5em;
  }
}

<p>Aiueo</p>

2022-09-30 20:47

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656