Изменить часть текста с помощью CSS-анимации - PullRequest
Новая
       9

Изменить часть текста с помощью CSS-анимации

0 голосов
/ 01 июля 2019

У меня есть текст на странице HTML, и я хочу изменить его часть с помощью анимации.

Я нашел этот вопрос , но в моем случае он не работает или, кажется, не то решение, которое я искал. Вот мой код: 

.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>

Как видите, анимация работает не так, как ожидалось. Я имею в виду, что «2» появляется два раза до «3», а затем «2» появляется снова с непрозрачностью 1 вместо 0,5. Пожалуйста, взгляните на CSS-код и внимательно посмотрите на анимацию. Кажется, что не следовать CSS-коду для каждого шага анимации. Можете ли вы выяснить, что не так с моим кодом? Как правильно изменить финальную часть текста?

1 Ответ

2 голосов
/ 01 июля 2019

Пожалуйста, проверьте это 

.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>
...