Изменить часть текста с помощью CSS-анимации
У меня есть текст на 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 не соответствует каждому шагу анимации. Можете ли вы понять, что не так с моим кодом? Как сделать так, чтобы финальная часть текста менялась правильно?
«не работает, как ожидалось» — вы забыли упомянуть, каковы ваши ожидания и чем они отличаются от результатов.
Я отредактировал свой вопрос. Надеюсь теперь понятно. Спасибо.
before { content: '2'; ==> before { content: '4'; ?
Ответы 1
Пожалуйста, проверьте это
.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>Он все еще работает плохо... Вы видите, что "2" мигает два раза, прежде чем появится "3"?
каковы ваши ожидания, не могли бы вы сказать мне только требование
«2» имеет непрозрачность 1 -> непрозрачность 0,5 -> непрозрачность 0; затем появляется «3» с непрозрачностью 0,5 -> непрозрачность 1 -> непрозрачность 0,5 -> непрозрачность 0; затем снова появляется «2» с непрозрачностью 0,5 -> непрозрачность 1 -> и так далее...
Я обновил код, пожалуйста, проверьте его. @умная мышь
если это работает для вас, пожалуйста, сделайте это принятым ответом :)
Да, это то, что я искал. Спасибо!
Пожалуйста, уточните вашу конкретную проблему или добавьте дополнительные детали, чтобы выделить именно то, что вам нужно. В том виде, в котором он сейчас написан, трудно точно сказать, о чем вы спрашиваете.