v-borgomotov
@v-borgomotov
Молодой креативный специалист

Как сделать анимацию текста?

Подскажите пожалуйста как реализовать простую анимацию, на подобие animate.css rotateInDownLeft не к одному элементу, а к нескольким.
Пример:
<p>Hello <span>world</span><span>people</span><span>man</span></p>

Каждый <span>, плавно уходит и на месте него другой. И так бесконечно.

Еще 1 важное замечание - не хочу подключать ради этого стили animate.css.
  • Вопрос задан
  • 104 просмотра
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Вам нужно открыть файл с анимациями, найти нужную, вставить в свои стили.
Изменить эту анимацию. Не 0% и 100%, а так, чтобы после того, как закончилась видимая часть анимации ещё некоторое время ничего не происходило. Сколько там у вас спанов? 5? Значит, до 20% видимая часть, дальше типа пауза, ничего не происходит и прозрачность на 0. Если 20 будет некрасиво - подправите.

Изменить длительность анимации в соответствии с новыми знаниями.

Задержку анимации удобнее задавать через кастомные свойства, чтобы не было мучительно больно пересчитывать и переписывать 100 раз, если вам захочется всюду изменить шаг с 2,5 на что-то другое.

:root {
  --delay: 2.5s;
}

.slidingVertical span:nth-child(2) {
  animation-delay: var(--delay);
}

.slidingVertical span:nth-child(3) {
  animation-delay: calc(2*var(--delay));
}

.slidingVertical span:nth-child(4) {
  animation-delay: calc(3*var(--delay));
}

.slidingVertical span:nth-child(5) {
  animation-delay: calc(4*var(--delay));
}


Типа того
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
сделай гифку
Ответ написан
Комментировать
Alex_mos
@Alex_mos
Google всему голова
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы