Change part of a text using CSS animation

Question

I have a text in an HTML page and I want to change a part of it with an animation.

I have found this question but it is not working in my case or it seems not that solution I was looking for. Here is my code:

.change:before {
  content: '2';
  opacity: 1;
  animation-name: change-letter;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes change-letter {
  0% { opacity: 0.5; }
  17% { opacity: 0; content: "3"; }
  34% { opacity: 0.5; }
  50% { opacity: 1; }
  66% { opacity: 0.5; }
  85% { opacity: 0; content: "2"; }
  100% { opacity: 0.5; }
}

<span>My application version <span class="change"></span></span>

As you can see the animation is not working as expected. I mean that "2" appears two time before "3" and then "2" appear again with opacity 1 instead of 0.5. Please have a look a the CSS code and the look at the animation carefully. It seems not to follow the CSS code for every step of the animation. Can you figure out what is wrong with my code? How to make the final part of the text changing in the right way?

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. — Paulie_D
– Paulie_D, Commented Jul 1, 2019 at 14:27
"not working as expected" - you forgot to mention what your expectations are, and how they differ from the results. — Peter B
– Peter B, Commented Jul 1, 2019 at 14:29

Irin · Accepted Answer · 2019-07-01 15:38:04Z

2

Please check it out

.change:before {
  content: '2';
  font-size: 100%;
  animation-name: change-letter;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@keyframes change-letter {
  5% {
    opacity: 1;
    content: "2"
  }
  20% {
    opacity: 0.5;
    content: "2"
  }
  40% {
    opacity: 0;
    content: "2"
  }
  45% {
    opacity: 0;
    content: "3"
  }
  60% {
    opacity: 0.5;
    content: "3"
  }
  80% {
    opacity: 1;
    content: "3"
  }
  100% {
    opacity: 0;
    content: "3"
  }
  0% {
    opacity: 0;
    content: "2"
  }
}

<span>My application version <span class="change"></span></span>

edited Jul 1, 2019 at 15:38

answered Jul 1, 2019 at 14:38

Irin

1,2761 gold badge8 silver badges10 bronze badges

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

6 Comments

smartmouse Over a year ago

It is still working bad... Can you see that "2" blinks two times before "3" appears?

Irin Over a year ago

what is your expectation can you please tell me just the requirement

smartmouse Over a year ago

"2" has opacity 1 -> opacity 0.5 -> opacity 0; then "3" appears with opacity 0.5 -> opacity 1 -> opacity 0.5 -> opacity 0; then "2" appears again with opacity 0.5 -> opacity 1 -> and so on...

Irin Over a year ago

I have update the code please check it out. @smartmouse

Irin Over a year ago

if this work for you please make it as an accepted answer :)

|

Collectives™ on Stack Overflow

Change part of a text using CSS animation

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related