Как создать анимацию набора текста в CSS? Пошаговое руководство
CSS-анимация — это простой способ добавить дополнительные интерактивные элементы на ваш сайт. Даже самый простой анимационный эффект может превратить скучную статичную веб-страницу в интересный и увлекательный веб-проект.
В этой статье мы покажем вам, как добиться эффекта анимации ввода текста с помощью CSS. С этим эффектом текст на экране будет выглядеть так, как если бы он печатался на пишущей машинке или в текстовом процессоре.
Как создать анимацию набора текста в CSS?
Давайте пошагово рассмотрим процесс создания:
Создайте текстовый документ
Для начала напишем HTML-код, который будем анимировать. Создадим контейнер div с контейнером class, который содержит текстовый элемент. Внутри контейнера поместим абзац, добавим этому абзацу типизированный класс и вставим любой текст:
<div class=»container«>
<p class=»typed«>This is a paragraph of typed text.</p>
</div>
В этом примере мы используем элемент p, но вы также можете использовать любой элемент, который содержит текст, например h1.
Анимируйте текст
Далее мы будем использовать анимацию CSS, чтобы добавить эффект набора текста. В своем CSS установите контейнер div, как встроенный блок со свойством display.
.container{
display: inline-block;
font-family: «arial»;
font-size: 24px; }
С помощью установки display на inline-block ширина контейнера div будет равна ширине текста абзаца внутри. Затем необходимо стилизовать наш типизированный элемент свойствами:
- overflow: hidden гарантирует, что текст не будет виден за краем элемента;
- white-space: nowrap удерживает текст на одной строке;
- width: 0 скрывает текст в начале анимации.
Вот как будет выглядеть CSS:
.container{
display: inline-block;
font-family: «arial»;
font-size: 24px;
}
.typed {
overflow: hidden;
white-space: nowrap;
width: 0;
}
Теперь самое интересное — добавление анимации. Создадим правило @keyframes в своем CSS:
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
Это правило изменяет ширину нашего элемента абзаца с 0 (т. е. невидимого) до 100% ширины его родительского элемента. Далее добавим несколько дополнительных свойств CSS в наш класс .typed:
- animation: typing присваивает созданное нами правило @keyframes классу .typed;
- animation-duration: 1.5s делает анимацию продолжительностью 1,5 секунды;
- animation-timing-function: steps(30, end) заставляет анимацию воспроизводиться пошагово, а не плавно. Это важно, поскольку создает эффект «напечатанности». 30 — это количество шагов анимации, и эти шаги распределяются равномерно до конца анимации;
- animation-fill-mode: forwards гарантирует, что после завершения анимации элемент абзаца останется со 100% шириной. В противном случае ширина будет сброшена до 0.
Вот как будет выглядеть CSS:
.container{
display: inline-block;
font-family: «arial»;
font-size: 24px;
}
.typed {
overflow: hidden;
white-space: nowrap;
width: 0;
animation: typing;
animation-duration: 1.5s;
animation-timing-function: steps(30, end); animation-fill-mode: forwards;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
В зависимости от длины вашего текста вы можете увеличивать или уменьшать продолжительность и количество шагов анимации, чтобы добиться нужного эффекта.
Добавьте курсор
Полученную анимацию можно сделать еще лучше с помощью добавления эффекта «курсор» — это поможет создать эффект печати.
Добавить курсор просто: необходимо использовать правую границу нашего элемента абзаца, которая перемещается по мере увеличения ширины элемента абзаца. Просто добавьте border-right: 2px solid к вашему блоку .typed CSS. Вы также можете настроить ширину и цвет границы по своему вкусу.
Сделайте курсор мигающим
Чтобы добавить курсору эффект мерцания, вам необходимо создать второе правило @keyframes под названием blinking, которое начинает цвет границы как прозрачный, затем меняет его на черный, а затем снова на прозрачный:
@keyframes blinking {
0% {border-right-color: transparent}
50% {border-right-color: black}
100% {border-right-color: transparent}
}
Необходимо применить это правило @keyframes к нашему блоку .typed CSS. Вы можете установить продолжительность мигания на одну секунду или сделать его бесконечным.
Отцентрируйте текст
В самом конце мы рекомендуем отцентрировать анимацию. Для этого возьмем код, который у нас есть, и внесем небольшие изменения в контейнер:
- Изменим отображение контейнера с встроенного блока на сетку;
- Добавим place-items: center для контейнера;
- Установим ширину контейнера на 350 пикселей.
Вот такой код у нас получится:
.container{
font-family: «arial»;
font-size: 24px;
display: grid;
place-items: center;
width: 350px;
}
.typed {
overflow: hidden;
white-space: nowrap;
border-right: 2px solid;
width: 0;
animation: typing 1.5s steps(30, end) forwards, blinking 1s infinite;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blinking {
0% {border-color: transparent}
50% {border-color: black}
100% {border-color: transparent}
}
Источник: hubspot.com