Можно ли средствами CSS сделать анимацию текста?

Question

[Raul Abdullin]

Можно ли средствами CSS сделать анимацию текста?
Нужна простейшая анимация, при открытии сайта, чтобы заголовок появлялся не сразу, а плавно в течение секунды, как здесь https://unpigeon.me/

Comments

[WapSter]

Средствами css анимацию можно сделать, но запускать ее лучше при помощи js. Так как css не знает, когда страница загрузилась полностью.

[Raul Abdullin]

Тимур Турсунбаев, засада, js не знаю(

[WapSter]

raulvodov,

window.addEventListener('load', e => {
   element.classList.add('твой класс')
})

В принципе это все. Только изначально прячешь через css текст. Добавляемый класс должен содержать стили для анимации.

[runprogr]

гляньте в сторону библиотеки animate.css. Там много анимаций под большинство нужд

[Raul Abdullin]

Тимур Турсунбаев, спасибо огромное :)

[Raul Abdullin]

runprogr, ага спасибо

Answer 1

[Кирилл Никитин]

Для подобного примера я бы сэкономил время и использовал уже готовые решения. Подключите Animate.css и добавьте к заголовку соответствующий класс. Можно добавить Delay.css, если текст должен появиться не сразу. Ну и в особых случаях, обычно для объектов не на первом экране, к этому всему можно добавить WOW.js.

ПыСы: есть у меня ещё одна ссылка, вдруг пригодится https://tobiasahlin.com/moving-letters/

Comments

[Raul Abdullin]

Спасибо большое =) В целом всё понятно теперь. Вот только не понятно, какой класс из Animate.css добавить к нужному заголовку?

[Кирилл Никитин]

raulvodov, ну тут уже только вам решать, хотя думаю, вам подойдёт какой-нибудь из fadeIn или slideIn.

[Raul Abdullin]

Кирилл Никитин, да я вот и имею в виду, как узнать, какой из них даёт какие эффекты :)

[Кирилл Никитин]

raulvodov, так на сайте по ссылке заголовок «Animate.css» как пример и есть. Из списка выбираете и смотрите что будет с ним.

[Raul Abdullin]

Кирилл Никитин, а всё теперь понял, спасибо

Answer 2

[0ffff0]

Конфигурирование анимации