Анимация на сайте. Свойство animation

29 мая 2023

Свойство animation используется для создания анимации, например движения, изменения цвета, поворотов, изменения размера элементов. animation определяет набор ключевых кадров — keyframes, которые описывают, как изменяется свойство элемента со временем.

Синтаксис

animation:
  animation-name
  animation-duration
  animation-timing-function
  animation-delay
  animation-iteration-count
  animation-direction
  animation-fill-mode
  animation-play-state;

Наследование

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

Значения свойства

Значения animation могут быть комбинацией следующих параметров:

`animation-name`

Определяет название анимации, которое соответствует определенной группе ключевых кадров — @keyframes.

`animation-duration`

Задаёт продолжительность анимации в секундах или миллисекундах.

`animation-timing-function`

Определяет временную функцию, которая контролирует скорость и характер изменений во время анимации. Значения:

linear — анимация происходит с постоянной скоростью.

Пример анимации с постоянной скоростью

ease — значение по умолчанию, которое начинается медленно, затем ускоряется и замедляется в конце.

Пример анимации, которая начинается медленно, ускоряется и в конце замедляется

ease-in — начинается медленно и потом ускоряется.

Пример анимации, которая начинается медленно и потом

ease-out — начинается быстро и замедляется к концу.

Пример анимации, которая начинается быстро и замедляется к концу

ease-in-out — начинается медленно, затем ускоряется, а потом замедляется.

Пример анимации, которая начинается медленно, затем ускоряется, а потом замедляется

`animation-delay`

Задаёт задержку перед началом анимации в секундах или миллисекундах.

Пример анимации с задержкой в 3 секунды

`animation-iteration-count`

Определяет количество повторений анимации. Значения:

— infinite — анимация повторяется бесконечно. — Числовые значения — указывают конкретное количество повторений.

`animation-direction`

Определяет направление анимации. Распространенные значения:

normal — проигрывается в прямом направлении.

Пример анимации, которая.проигрывается в прямом направлении

reverse — проигрывается в обратном направлении.

Пример анимации, которая проигрывается в обратном направлении

alternate — проигрывается в прямом и обратном направлениях чередуясь.

Пример анимации, которая проигрывается в прямом и обратном направлениях чередуясь

`animation-fill-mode`

Определяет стили, применяемые к элементу до и после анимации. Распространенные значения:

none — стили элемента не изменяются до или после анимации.

Пример анимации

forwards — элемент сохраняет стили последнего кадра после окончания анимации.

Пример анимации

backwards — элемент применяет стили первого кадра до начала анимации.

Пример анимации

`animation-play-state`

Определяет состояние анимации: остановлена или воспроизводится. Значения:

running — анимация воспроизводится.
paused — анимация остановлена.

Пример использования

Создадим анимацию с именем myAnimation, которая изменяет прозрачность элемента от полностью прозрачного — opacity: 0, до полностью видимого — opacity: 1, а затем снова до полностью прозрачного. Анимация будет повторяться бесконечно — infinite и длиться 3 секунды — 3s.

<head>
  <style>
    @keyframes myAnimation {
      0% { opacity: 0; }
      50% { opacity: 1; }
      100% { opacity: 0; }
    }
    
    .element {
      animation: myAnimation 3s infinite;
    }
  </style>
</head>
<body>
  <div class="element">Пример элемента с анимацией</div>
</body>

@keyframes myAnimation {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.element {
  animation: myAnimation 3s infinite;
}

Пример анимации

⭐ Поддержка браузерами свойства animation

Нюансы использования

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

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Телеграм Подкаст Бесплатные учебники

Как работает :not() в CSS — исключаем элементы из стилей правильно

Доступно в Baseline в статусе «Widely Available» с 2023-07-21

Псевдокласс :not() позволяет задать стили для всех элементов, кроме тех, что соответствуют определённому селектору. Это мощный инструмент, который делает CSS гибче, чище и избавляет от необходимости писать сложные конструкции или добавлять лишние классы в HTML.

CSS

20 июля 2025

Выбор цветов в CSS через hsl() и hsla()

CSS-функции hsl() и hsla() позволяют задавать цвета на основе восприятия человеком, а не машинной модели RGB. Это делает работу с цветами более гибкой и наглядной, особенно при создании адаптивных интерфейсов, тёмных тем или анимаций.

CSS

18 июля 2025

Как перекрыть один элемент другим. CSS-свойство z-index

Свойство z-index в CSS отвечает за порядок наложения элементов на веб-странице. Оно определяет, какой элемент окажется сверху, а какой — будет скрыт под ним. Чем выше значение z-index, тем ближе к пользователю расположен элемент.

CSS

16 июля 2025

Единица измерения cap в CSS

С 11 декабря 2023 года (Baseline: Newly Available) в CSS появилась новая единица измерения — cap. Она измеряет высоту заглавной латинской буквы в шрифте, установленном для элемента. Это значит, что теперь можно задавать размеры, отступы и позиционирование элементов не только в пикселях, em или rem, но и относительно визуальной высоты заглавных букв.

Эта единица особенно полезна при работе с крупными заголовками, адаптивной типографикой и точным выравниванием текста.

CSS

8 июля 2025

10 свойств в CSS о которых вы, вероятно, не знали

Если вы только начинаете разбираться в CSS, скорее всего, вам кажется, что мир стилей ограничивается свойствами вроде <margin>, <color>, <font-size> и может быть, <flex>. Но CSS — это не просто про то, чтобы задать цвет кнопке и отступ между блоками. За простыми примерами скрывается целый мир возможностей, о которых многие не догадываются. В этой статье рассказываем о десяти свойствах, которые встречаются редко, но способны заметно упростить вам жизнь или добавить в проект изюминку.

CSS

22 июня 2025

Округление в CSS с функцией round()

Функция round() появилась в CSS как часть стандарта Values and Units Level 4. Она предназначена для округления числовых значений до нужной кратности. Это полезный инструмент, который позволяет контролировать размеры и позиции без лишних ухищрений с calc() или JavaScript.

CSS

22 июня 2025

focus-visible

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

Браузеры по умолчанию показывают рамку (outline) вокруг элемента, когда он получает фокус — например, при клике мышкой или при перемещении с помощью клавиатуры. Эта рамка помогает понять, какой элемент активный.

Но бывает так, что рамка появляется даже тогда, когда она не нужна. Например, Вы кликнули мышкой по кнопке, и вокруг неё появилась рамка — выглядит не очень красиво, а пользы от неё нет, потому что курсор мыши уже показывает, куда мы кликнули.

Тут и помогает :focus-visible. Этот псевдокласс позволяет показывать рамку только в тех случаях, когда это действительно полезно — обычно при навигации с клавиатуры.

CSS

21 июня 2025

CSS font-palette: управление цветами шрифтов

Свойство font-palette позволяет выбрать одну из цветовых палитр, встроенных в цветной шрифт, или создать свою. При использовании — оно задаёт преобладающую окраску глифов, и свойство color уже не влияет.

В свою очередь, цветной шрифт — это шрифт, в котором глифы содержат встроенную информацию о цвете. В отличие от обычных векторных шрифтов (TrueType, OpenType), где цвет задаётся снаружи с помощью CSS-свойства color, в цветном шрифте сами глифы уже закодированы с цветными деталями — например, несколько заливок, градиенты, обводки, изображения.

Альтернативные цветовые палитры шрифта Nabla (Typearture, Google Fonts)

Свойство вошло в Baseline в статусе widely available в мае 2025 года. Теперь его можно использовать в проектах и не переживать о поддержке.

CSS

18 июня 2025

Как анимировать CSS Grids без JavaScript

Grid Layout — одна из самых зрелых технологий в CSS. Он давно решает задачи макета гораздо лучше, чем float, flex и position. Но долгое время у него была одна неочевидная граница: анимация размеров сетки.

Да, grid-template-columns и grid-template-rows существовали с самого начала появления гридов. Да, они были мощными. Но плавно менять их было нельзя — браузеры просто прыгали между состояниями. Анимация сетки оставалась мечтой.

Ситуация изменилась c 27 апреля 2025 года. Анимация grid-template-columns и grid-template-rows вошла в baseline — это означает, что теперь она официально поддерживается всеми современными браузерами. Без флагов. Без хака с display: contents. Просто работает.

CSS

1 июня 2025

Все единицы измерения в CSS от лучших к худшим

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

Абсолютные:

px — пиксели
cm — сантиметры
mm — миллиметры
in — дюймы
pt — типографские пункты
pc — пика

Относительные:

z% — процент от родителя
em — от размера шрифта родителя
rem — от размера шрифта корня
vw — 1% от ширины вьюпорта
vh — 1% от высоты вьюпорта
vmin / vmax — минимальное/максимальное из vw и vh
fr — доля пространства в грид-сетке
ch — ширина символа «0»
ex — высота строчной буквы «x»

Примеры ниже снабжены пояснениями из практики, с фокусом на применение в реальных проектах.

CSS

30 мая 2025

Анимация на сайте. Свойство animation

Синтаксис

Наследование

Значения свойства

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

animation-fill-mode

animation-play-state

Пример использования

Нюансы использования

Материалы по теме

Читать дальше

Вход

Регистрация

Восстановление доступа

Запишитесь на консультацию

`animation-name`

`animation-duration`

`animation-timing-function`

`animation-delay`

`animation-iteration-count`

`animation-direction`

`animation-fill-mode`

`animation-play-state`