CODEWITHSUNDEEP
htmlcsscss-animations
smartmouse
smartmouse

Reputation: 14404

Change part of a text using CSS animation

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?

Upvotes: 0

Views: 1295

Answers (1)

Irin
Irin

Reputation: 1276

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>

Upvotes: 2

Related Questions