Здесь мы разберем CSS анимацию — печатание слов по буквам.
Это статья из цикла заметок по CSS анимации и эффектам.
Это эффект, при котором текст появляется не весь сразу, а по одной букве, создавая ощущение «печати» или «набора текста».
Такой эффект можно сделать несколькими способами. Один из самых простых — с помощью @keyframes и задержки (animation-delay) для каждой буквы.
Выглядит — это так (анимация начинается каждый раз при загрузке страницы).
П р и в е т , э т о т т е к с т п о к а з а н п о б у к в а м .
Вот пример на чистом CSS и HTML:
|
1 2 3 4 5 6 7 8 |
<p class="typing"> <span style="animation-delay: 0s">П</span> <span style="animation-delay: 0.1s">р</span> <span style="animation-delay: 0.2s">и</span> <span style="animation-delay: 0.3s">в</span> <span style="animation-delay: 0.4s">е</span> <span style="animation-delay: 0.5s">т</span> </p> |
Стили:
|
1 2 3 4 5 6 7 8 9 10 11 |
.typing span { opacity: 0; display: inline-block; animation: css-animation-typing 0.3s forwards; } @keyframes css-animation-typing { to { opacity: 1; } } |
Можно генерировать такие span’ы на сервере или с помощью JavaScript, если текста много.
Эффект выглядит аккуратно, отлично подходит для заголовков, цитат, hero-текста на главной странице сайта, и вообще добавляет немного «оживлённости» даже самым статичным блокам.
