Анимация множественного изменения текста не работает - PullRequest
Новая
       10

Анимация множественного изменения текста не работает

0 голосов
/ 22 сентября 2019

В последнее время я больше изучал анимацию и хотел анимировать текст, который переходит от одного слова к другому слову, к другому слову и т. Д., И в то время как код, который я использую, делает то, что должен, естьрамка между тем, где вы видите, что текст меняется.Кто-нибудь знает, как это исправить?

Попытка добавления дополнительных ключевых кадров, делающих его более похожим на пошаговый код, но, похоже, это не сработало.

HTML (где изменяется текст): 

<h2 class="subtitle">I am feeling <b class="moods"></b></h2>

CSS 

.moods:before {
    content: 'sad';
    animation-name: head;
    animation-duration: 30s;
    animation-iteration-count: infinite;
}
@keyframes head {
    0% {opacity:0;}
    5% {opacity:1; content: "sad";  }
    10% {opacity:0;}
    15% {opacity:1; content: "happy"; }
    20% {opacity:0; }
    25% {opacity:1; content: "joyfull"}
    30% {opacity:0;}
    35% {opacity:1; content: "mad"}
    40% {opacity:0; }
    45% {opacity:1; content: "depressed"}
    50% {opacity:0; }
    55% {opacity:1; content: "angry"}
    60% {opacity:0; }
    65% {opacity:1; content: "twitchy"}
    70% {opacity:0; }
    75% {opacity:1; content: "sick"}
    80% {opacity:0; }
    85% {opacity:1; content: "healthy"}
    90% {opacity:0; }
    95% {opacity:1; content: "energetic"}
    100% {opacity:0;}
}

Мне нравится, как это уже работает, я просто хотел бы, чтобы это был плавный переход, не видя изменения слова при изменениисодержание класса.

1 Ответ

0 голосов
/ 22 сентября 2019

Мы можем сделать вещи немного более интересными, связав наши переходы вместе, используя запятые, затем поиграв с их длительностью и задержкой, чтобы создать такой же эффект многоэтапного движения, который возможен в анимации ключевых кадров.

...