Эффект печатной машинки с CSS: steps(), анимации и лайфхаки
CSS прошёл большой путь. Сегодня он позволяет делать эффекты, которые раньше требовали JavaScript. Одним из таких приёмов является имитация печатающего курсора и постепенного появления текста. В статье показано, как получить эффект печатной машинки с помощью CSS-функции steps(), как оживить курсор и какие варианты полезны в реальных проектах.
Что такое эффект печатной машинки
Эффект печатной машинки — это анимация текста, при которой символы (или блоки текста) появляются постепенно, как будто их печатают в реальном времени. Зритель видит постепенное раскрытие сообщения, что создаёт интригу и привлекает внимание.
Кратко: эффект удобен для заголовков, интро-страниц, презентаций и интерфейсов, где важно последовательно раскрывать информацию.
Как работает функция steps()
CSS-функции дают гибкость, которую сложно достичь только статическими стилями. Функция steps() используется в timing-function и заставляет анимацию «шагать» дискретно, а не плавно.
Синтаксис:
animation-timing-function: steps(n, direction)Параметры:
- n — число шагов (целое). Чем больше n, тем более гладкой будет выглядеть анимация.
- direction — либо start, либо end. Если опустить — берётся end по умолчанию.
Поведение:
- start — первый шаг завершён сразу при старте анимации.
- end — последний шаг соответствует концу анимации.
Пример HTML-разметки для демонстрации движения блока:
Базовая анимация движения в CSS — блок плавно перемещается:
.container {
background-color: blue;
}
div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
}
@keyframes movebox {
100% {
transform: translateX(100vw);
}
} Если вместо плавности нужен «рывок», добавьте steps():
div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
animation-timing-function: steps(10, end);
} Чем выше n, тем меньше заметна «рывистость».
Важно: если направление не указано, браузер использует end.
Реализация эффекта печатной машинки — структура проекта
Создайте папку проекта и добавьте два файла: index.htm и style.css.
Содержимое index.htm (шаблон):
Document
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Reiciendis, tempore!