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

Question

[Вячеслав Боргомотов]

Подскажите пожалуйста как реализовать простую анимацию, на подобие animate.css rotateInDownLeft не к одному элементу, а к нескольким.
Пример:

<p>Hello <span>world</span><span>people</span><span>man</span></p>

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

Еще 1 важное замечание - не хочу подключать ради этого стили animate.css.

Comments

[Ankhena]

И что именно у вас не получилось?
Код на jsfiddle.net

[Вячеслав Боргомотов]

Ankhena,

https://jsfiddle.net/V_Borgomotov/zxoqmsfj/22/

[Ankhena]

Вячеслав Боргомотов, вы их прибили абсолютом в одно место.

Откройте файл с анимациями, возьмите оттуда только нужную вам (зачем таскать с собой все остальные?).
Расположите спаны как вам нужно.

p.s. свойство без префиксов должно быть указано последним, а не наоборот, как у вас.

[Вячеслав Боргомотов]

Ankhena, Можно пример? Логику понимаю, но не до конца.

[Ankhena]

Вячеслав Боргомотов,

вы их прибили абсолютом в одно место.

Хотя, может вам так и надо, чтобы они в одной точке вертелись.

Вам нужно открыть файл с анимациями, найти нужную, вставить в свои стили.
Изменить эту анимацию. Не 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));
}

[Exploding]

И точка в конце каждого слова вызывает кровотечение из глаз

Answer 1

[Ankhena]

Вам нужно открыть файл с анимациями, найти нужную, вставить в свои стили.
Изменить эту анимацию. Не 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));
}

Типа того

Comments

[Вячеслав Боргомотов]

Спасибо!

Answer 2

[Александр]

сделай гифку

Answer 3

[Alex_mos]

думаю то что нужно