CSS-анимация текста: 28 эффектов с примерами и настройкой

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

Ниже — наша мастерская с 28 собственными примерами в шести направлениях: движение букв, градиенты, свечение, появление, объём и микроэффекты. Можно подставить свою фразу, подобрать оформление и забрать пример. Идею темы подсказала подборка текстовых эффектов на Proglib; здесь самостоятельные реализации и практический разбор их применения.

Где анимация текста помогает, а где мешает

Начинайте с роли надписи. Заголовок первого экрана может один раз появиться при открытии страницы. Пункт меню — подчеркнуться при выборе. Число в карточке — коротко отреагировать на изменение. В каждом случае движение объясняет событие или расставляет акценты. Бесконечно переливающийся абзац заставляет следить за оформлением вместо содержания.

Выберите один главный эффект для блока. Если буквы прыгают, фон вращается и тень одновременно пульсирует, трудно понять, куда смотреть. Для инструкции, формы оплаты или длинного текста начните с обычной типографики. Декор добавляйте к короткому фрагменту, который действительно нужно выделить.

Мастерская: 28 эффектов с вашим текстом

Сначала выберите направление и пример, затем замените демонстрационную фразу своей. Изначально видны 12 карточек: остальные раскрываются кнопкой, а категории и поиск помогают найти подходящий вариант. Оценивайте оформление на реальной длине: название из четырёх букв и заголовок из шести слов ведут себя по-разному. Цвета и параметры движения позволяют сделать один приём спокойнее или выразительнее.

1. Определите задачу. Для меню начните с микроэффектов, для обложки — с появления или градиента, для отдельного декоративного акцента — со свечения.
2. Подставьте текст. Добавьте пробелы, кириллицу и длинное слово. Проверьте, не обрезается ли надпись по краям.
3. Настройте умеренно. Меняйте по одному параметру. Так легче понять, что влияет на результат.
4. Сравните состояния. Просмотрите запуск, паузу и вариант без движения. Важная фраза должна оставаться понятной во всех трёх случаях.
5. Заберите пример. Используйте код выбранного варианта или скачайте проект мастерской для самостоятельной работы.

Мастерская показывает собственные демонстрации, а не встраивает чужие CodePen-страницы. Ниже разобраны базовые рецепты, из которых удобно собирать похожие решения. Для разделения произвольной фразы на буквы и управления запуском понадобится небольшой JavaScript; сами визуальные преобразования выполняются стилями.

Из чего собирается эффект: элемент, свойство, время

В любом примере ответьте на три вопроса: что движется, какое свойство меняется и когда начинается изменение. Для целой надписи достаточно одного элемента. Для волны нужны отдельные буквы. Для блика можно добавить декоративный слой, оставив основной текст неподвижным.

transition удобно применять между состояниями, например обычным и наведённым. @keyframes описывает последовательность кадров: появление, подъём, возвращение. Имя анимации связывает правило с элементом. Называйте его по назначению и добавляйте префикс проекта, чтобы не пересечься с анимациями темы WordPress.

Волна по буквам: одна анимация, разные задержки

Секрет волны — не отдельная программа для каждой буквы. Все символы выполняют одинаковый подъём, но начинают его по очереди. Положительная animation-delay откладывает старт. В примере шаг составляет 70 мс; последняя буква начинает позже первой.

<h3 class="demo-wave">
  <span class="demo-reader">Волна</span>
  <span class="demo-visual" aria-hidden="true">
    <span style="--i:0">В</span><span style="--i:1">о</span><span style="--i:2">л</span><span style="--i:3">н</span><span style="--i:4">а</span>
  </span>
</h3>
<style>
.demo-reader {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.demo-wave [aria-hidden] > span {
  display: inline-block;
  animation: demo-wave-up 900ms ease-in-out both;
  animation-delay: calc(var(--i) * 70ms);
}
@keyframes demo-wave-up {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-0.18em); }
}
@media (prefers-reduced-motion: reduce) {
  .demo-wave [aria-hidden] > span { animation: none; }
}
</style>

Здесь исходная фраза доступна вспомогательным технологиям, а декоративная копия исключена из дерева доступности. Не помещайте кнопки или ссылки внутрь скрытого через aria-hidden слоя. Такой слой предназначен только для визуального оформления; это ограничение описано в документации aria-hidden.

Разлёт собирается похожим способом: буква получает собственное смещение и поворот, затем возвращается на место. Ограничивайте амплитуду: символы должны оставаться в области предпросмотра. Для длинной фразы лучше анимировать слова или всю строку — иначе последовательность растягивается, а переносы становятся труднее контролировать.

Градиентный текст: сначала читаемый цвет, затем украшение

У градиентного текста фон обрезается по форме букв. В обычном состоянии задайте надписи читаемый однотонный цвет. Прозрачность включайте только внутри проверки поддержки, вместе с фоном и обрезкой. Так неподдерживаемое оформление не превращает заголовок в пустое место.

.demo-gradient {
  color: #155b61;
  font-weight: 800;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .demo-gradient {
    background-color: #155b61;
    background-image: linear-gradient(110deg, #155b61, #7256a8, #a84753);
    background-size: 220% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: demo-color-travel 4s ease-in-out 2 alternate;
  }
}
@keyframes demo-color-travel {
  to { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-gradient { animation: none; }
}

Правило применяется к обычному элементу, например <h3 class="demo-gradient">Цвет в движении</h3>. Важно проверить самые светлые участки палитры: они не должны растворяться в фоне. MDN отдельно рекомендует учитывать читаемость и запасной вариант при использовании background-clip: text.

Линейный градиент даёт направленное движение цвета. Радиальный — цветовое пятно, конический — круговой переход. Чёткие повторяющиеся полосы создают более графичное оформление. Для подбора цветов можно использовать наш генератор CSS-градиентов, затем перенести палитру в текстовый пример.

Неон и свечение: сохраните резкие контуры букв

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

.demo-glow {
  color: #ecfaf4;
  text-shadow: 0 0 0.08em #ecfaf4,
               0 0 0.24em #75c9bc,
               0 0 0.5em #247d82;
  font-weight: 800;
}
.demo-glow-stage {
  background: #102e35;
  padding: 1.5rem;
}

Поместите надпись с demo-glow внутрь блока demo-glow-stage. Список через запятую задаёт несколько слоёв text-shadow. Большой радиус без чёткой основной буквы создаёт размытое пятно. На маленьком экране уменьшайте ореол вместе с размером шрифта.

Появление и маска: показываем фразу, не пряча содержание

Для первого знакомства подойдёт подъём на небольшое расстояние с прозрачностью. По умолчанию заголовок виден. Анимация добавляется только в режиме, где пользователь не попросил уменьшить движение. После завершения элемент возвращается к нормальному отображению без постоянной зависимости от JavaScript.

.demo-reveal {
  font-size: clamp(1.6rem, 5vw, 3.2rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
@media (prefers-reduced-motion: no-preference) {
  .demo-reveal {
    animation: demo-reveal-in 650ms ease-out;
  }
}
@keyframes demo-reveal-in {
  from { opacity: 0; transform: translateY(0.3em); }
  to { opacity: 1; transform: translateY(0); }
}

Класс можно назначить обычному h3 с вашей фразой. Для раскрытия через край используется clip-path: например, прямоугольная область постепенно увеличивается. Проверяйте финальное состояние — вся надпись должна помещаться в область, включая выносные части букв.

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

Объём и 3D: тень не заменяет геометрию

Несколько теней со смещением создают иллюзию толщины букв, хотя надпись остаётся плоской. Повороты rotateX() и rotateY() меняют её положение в пространстве; перспектива помогает сделать глубину заметной. Это разные приёмы, и их можно применять по отдельности.

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

Для transform важна структура элемента: обычный нетрансформируемый строчный контейнер нужно сделать подходящим для преобразования, например через display: inline-block. Поворот и смещение объединяйте в одном списке: два независимых правила transform могут перезаписать друг друга.

Объёмный заголовок хорошо работает на обложке небольшого проекта. Цена, адрес, техническая характеристика или длинный пункт списка обычно выигрывают от прямого читаемого начертания. Масштаб эффекта выбирайте по задаче, а не по максимальному значению ползунка.

Микроэффекты: мышь, клавиатура и касание

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

<a class="demo-link" href="#csstext-workshop">Открыть мастерскую</a>
<style>
.demo-link {
  display: inline-block; position: relative;
  color: #155b61; padding-block: 0.6rem;
  text-decoration: none;
}
.demo-link::after {
  content: ""; position: absolute; inset-inline: 0;
  bottom: 0.3rem; height: 2px; background: currentColor;
  transform: scaleX(0.2); transform-origin: left;
  transition: transform 180ms ease;
}
.demo-link:hover::after,
.demo-link:focus-visible::after { transform: scaleX(1); }
.demo-link:focus-visible {
  outline: 2px solid currentColor; outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .demo-link::after { transition: none; }
}
</style>

:focus-visible позволяет оформлять заметный фокус в ситуациях, которые определяет браузер, в том числе при клавиатурной навигации. Декоративный переход не должен скрывать рамку фокуса или превращать текст кнопки в цвет её фона.

Для демонстрации эффектов по касанию лучше дать отдельную кнопку повторного запуска. Пользователь нажимает её и видит полный цикл. Для настоящей ссылки сохраняйте переход с первого нажатия; дополнительная анимация не должна заставлять сначала «раскрыть» пункт, а потом нажимать снова.

Своя фраза и параметры: не ломаем слова и эмодзи

Повторяющиеся значения вынесите в CSS-переменные: цвет, длительность, амплитуду, шаг задержки. Один компонент можно настроить для разных страниц без копирования длинного набора правил. Принцип наследования и использования var() описан в руководстве по CSS-переменным.

Если посетитель вводит произвольный текст, создавайте визуальные символы через textContent, а не вставкой его строки в innerHTML. Вариант ниже рассчитан на подготовленную заголовочную структуру с видимой копией .demo-visual и полной фразой .demo-reader из примера с волной.

function setAnimatedText(root, text) {
  const reader = root.querySelector('.demo-reader');
  const visual = root.querySelector('.demo-visual');
  reader.textContent = text;
  visual.replaceChildren();

  if (typeof Intl.Segmenter !== 'function') {
    visual.textContent = text; // Читаемый вариант без деления.
    return;
  }
  const segmenter = new Intl.Segmenter('ru', { granularity: 'grapheme' });
  let index = 0;
  for (const { segment } of segmenter.segment(text)) {
    const span = document.createElement('span');
    span.textContent = segment;
    span.style.setProperty('--i', String(index++));
    visual.append(span);
  }
}

Назначьте визуальному контейнеру aria-hidden="true" и white-space: pre-wrap, чтобы сохранять пробелы. Intl.Segmenter с режимом grapheme разделяет текст на пользовательские символы; простой split('') может разбить сложный знак. Если API недоступен, пример оставляет целую фразу.

При динамическом изменении текста обновляйте обе копии вместе. Для очень длинной надписи ограничьте декоративную обработку или перейдите к движению всей строки. В продуктивном компоненте не нужно создавать сотни анимированных узлов ради одного предложения.

Вариант без движения и читаемость

prefers-reduced-motion сообщает о системном предпочтении уменьшить необязательное движение. Учитывайте его в стилях и логике запуска. Для декоративного текста разумный вариант — убрать анимацию, оставив исходный цвет, форму и содержание.

Кнопка паузы помогает остановить движение в конкретной демонстрации, но не равна варианту без анимации. При паузе буквы могут замереть в середине поворота или быть частично скрыты. В спокойном режиме верните конечное читаемое состояние: прозрачность 1, нормальное положение и отсутствие маски.

Не объявляйте каждый кадр через aria-live. Визуальное вращение заголовка не является новым сообщением. Сохраните обычные уровни заголовков, реальные ссылки и кнопки. Для дублированной графической надписи должна оставаться одна полная фраза, которую можно прочитать вспомогательными средствами.

Контраст оценивайте на фактическом фоне и на всех важных участках градиента. Выбор красивой палитры сам по себе не подтверждает соответствие требованиям доступности. Проверьте текст при увеличении масштаба, с выключенным движением и с отключённым декоративным фоном.

Производительность: один хороший эффект вместо двадцати циклов

Для начала предпочитайте движение через transform и прозрачность через opacity. Изменение геометрии, большие размытия и множество теней могут стоить дороже. Это общий ориентир, а не обещание одинаковой плавности на всех устройствах; процесс отрисовки объясняется в руководстве web.dev по производительным анимациям.

Дайте эффекту закончиться после одного-двух циклов. Если нужен постоянный декоративный фон, запускайте только активный пример. Остальные карточки могут показывать статичный кадр. Состояние паузы CSS контролируется через animation-play-state; она сохраняет текущий момент, а не запускает всё с начала.

Для реальной страницы можно отслеживать появление блока в области просмотра с помощью Intersection Observer и отключать декоративное движение вне экрана. Наблюдатель сообщает о пересечении области, а решение «запустить один раз», «пауза» или «повторить» остаётся в вашем коде.

Проверьте готовый компонент в Chrome DevTools: запишите несколько секунд во вкладке Performance, сравните тяжёлый и упрощённый варианты. Не добавляйте will-change всем буквам заранее: начинайте с работающего CSS и измеряйте конкретное затруднение.

Как перенести эффект на свой сайт

1. Возьмите один пример. Сначала вставьте HTML и CSS в отдельную тестовую страницу. Для поочерёдных букв добавьте необходимую подготовку JavaScript.
2. Задайте собственные имена. Используйте префикс в классах и @keyframes. Не применяйте правила ко всем h1, span или ссылкам сайта.
3. Проверьте окружение. Цвет темы, наследуемый шрифт, высота строки и overflow родителя могут изменить результат.
4. Проверьте управление. Пройдите кнопки клавишей Tab. На телефоне запустите повтор касанием. Убедитесь, что исходное действие доступно сразу.
5. Сравните на узком экране. Используйте свою длинную фразу, крупный масштаб и спокойный режим. Не исправляйте обрезание запретом переносов всей страницы.

В WordPress стили и сценарии удобно подключать через отдельный небольшой плагин или дочернюю тему только на нужной странице. Это упрощает дальнейшее обновление и помогает не затронуть остальные статьи. Для прототипа можно начать с нашего конструктора страниц Bootstrap 5, а затем добавить один выбранный акцент.

Проверка адаптивной ширины в браузере помогает заметить переносы и переполнение. Плавность и удобство касания дополнительно оценивайте на настоящем телефоне. Размер экрана в эмуляции не воспроизводит автоматически производительность конкретного устройства.

Частые вопросы о текстовых эффектах

Можно ли обойтись совсем без JavaScript?

Да, для градиентного цвета, свечения, появления целой надписи и реакции на наведение. Если фраза известна заранее, буквы можно разметить вручную. Подготовка произвольного текста, отдельная кнопка повтора и управление демонстрацией удобнее с небольшим JavaScript.

Почему текст исчез после добавления градиента?

Проверьте фон, правило обрезки и переопределение цвета. Прозрачность должна появляться вместе с поддерживаемым оформлением. Начните с однотонного текста и добавляйте свойства последовательно.

Почему волна не работает на каждой букве?

Проверьте, что символы находятся в отдельных подходящих элементах, у каждого задан индекс задержки и совпадает имя @keyframes. У всей строки с одним контейнером будет одно движение.

Нужен ли бесконечный цикл?

Обычно нет. Для вступления достаточно однократного запуска, для ссылки — реакции на выбор. Непрерывный эффект оставляйте для оправданной декоративной задачи и давайте возможность его остановить.

Как проверить готовый вариант перед публикацией?

Пройдите полный цикл со своим текстом, затем остановите движение. Проверьте клавиатуру, узкий экран, увеличение масштаба, системный режим уменьшенной анимации и неподдерживаемое украшение. Человек должен получить содержание и выполнить действие даже без эффекта.