Анимация текста: создаем эффект пишущей машинки на чистом CSS

На связи! Присаживайся, наливай кофе. Сегодня разберем одну классическую задачу, которую дизайнеры обожают пихать в макеты главных страниц: эффект пишущей машинки. Ну, ты знаешь, когда заголовок не просто появляется, а бодро печатается по буквам, мигая курсором в конце.

Обычно первая реакция разработчика среднего уровня — побежать искать JS-библиотеку на npm или писать костыльный интервал на React. Но мы же с тобой не хотим тащить лишние килобайты в бандл ради одной анимации? Сегодня я покажу, как сделать этот эффект элегантно, быстро и исключительно средствами современного CSS.

Как мы страдали раньше

Вспомни, как эту задачу решали лет пять назад. Это был настоящий парад костылей:

JS-плагины. Подключали тяжеленный Typed.js или писали свои обертки на setInterval. В итоге получали проблемы с производительностью, дерганый рендеринг на мобилках и кучу головной боли с SEO, ведь поисковые роботы видели пустой тег до того, как JS соизволит отработать.
Анимация ширины (width) от 0 до 100%. Если делать это в лоб без подготовки, текст плавно выезжал из-за левого края, как раскрывающаяся шторка, а не печатался по буквам. Смотрелось это дешево и совсем не было похоже на настоящую печатную машинку.
Костыли с позиционированием. Измерение длины строки в пикселях, попытки подстроиться под разные экраны через медиа-запросы… В общем, сплошная рутина и ноль удовольствия от процесса.

К счастью, сегодня у нас есть мощные инструменты. Чтобы гибко управлять параметрами нашей анимации, мы будем использовать кастомные свойства. Если ты до сих пор сомневаешься в их силе, почитай на досуге, почему переменные (CSS Variables) — это основа масштабируемого дизайна.

Как делать правильно в 2026 году

Секрет идеального эффекта пишущей машинки на чистом CSS кроется в трех вещах: моноширинном шрифте, единице измерения ch и временной функции steps().

Давай разберем эту магию по шагам:

Моноширинный шрифт (Monospace). В таких шрифтах каждая буква, цифра и даже пробел имеют абсолютно одинаковую ширину. Это критически важно для следующего шага.
Единица измерения ch. Она равна ширине символа «0» в выбранном шрифте. Поскольку у нас моноширинный шрифт, 1ch равен ширине абсолютно любого символа. Если в нашей фразе 22 символа, то её идеальная ширина — ровно 22ch.
Функция steps(). Вместо плавного перехода linear или ease мы говорим браузеру: «Разбей анимацию на N равных шагов». Если шагов будет столько же, сколько символов в строке, ширина блока будет увеличиваться строго посимвольно!

Для чистоты кода мы также применим современный нативный синтаксис CSS Nesting. Если ты все еще используешь Sass только ради вложенности, самое время узнать, зачем использовать CSS Nesting вместо SASS и LESS в современных проектах.

Готовый сниппет кода

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

<div class="typewriter-container">
  <h1 class="typewriter-text">Hello, Senior Frontend!</h1>
</div>

<style>
.typewriter-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0f172a;
  padding: 2rem;
}

.typewriter-text {
  /* Количество символов во фразе, включая пробелы */
  --chars: 23; 
  
  font-family: 'Courier New', Courier, monospace;
  font-size: 2.5rem;
  color: #38bdf8;
  font-weight: bold;
  
  /* Ограничиваем ширину под длину текста */
  width: calc(var(--chars) * 1ch);
  white-space: nowrap;
  overflow: hidden;
  
  /* Создаем каретку (курсор) */
  border-right: 3px solid #38bdf8;
  
  /* Запускаем две анимации: печать и мигание курсора */
  animation: 
    typing 4s steps(var(--chars)) infinite alternate,
    blink 0.8s step-end infinite;
}

/* Эффект печати: меняем ширину от 0 до полной длины */
@keyframes typing {
  from { width: 0; }
  to { width: calc(var(--chars) * 1ch); }
}

/* Эффект мигания курсора */
@keyframes blink {
  50% { border-color: transparent; }
}
</style>

Частая ошибка новичков

Самый частый факап при реализации этого эффекта — попытка использовать пропорциональные шрифты (вроде Arial, Roboto или Inter).

В пропорциональном шрифте буква «w» значительно шире, чем буква «i» или символ пробела. Если ты попытаешься применить к такому тексту шаг в ch, то анимация поплывет: в некоторых местах курсор будет обгонять буквы, а в других — отставать от них, ломая всю иллюзию печати.

Запомни железное правило: только monospace. Если дизайн требует конкретный шрифт, старайся договориться с дизайнером об использовании моноширинного начертания хотя бы для этого конкретного заголовка.

Вот и всё! Простой, производительный и полностью контролируемый эффект без единой строчки на JavaScript. Пользуйся на здоровье и удивляй коллег чистым кодом!

🔥 Больше фишек, готовых сниппетов и передовых подходов к CSS мы публикуем в нашем Telegram-канале. Подписывайтесь, чтобы не пропустить!