Keyframes css что это

CSS свойство @keyframes

Правило @keyframes устанавливает ключевые кадры при анимации элемента.

Ключевой кадр это свойства элемента (прозрачность, цвет, положение и др.), которые должны применяться к нему в заданный момент времени. Таким образом, анимация представляет собой плавный переход стилевых свойств от одного ключевого кадра к другому. Вычисление промежуточных значений между такими кадрами берёт на себя браузер.

Самый простой вариант, когда есть только два ключевых кадра — исходное и конечное состояние. Например:

 @keyframes box < from < left: 0; >to < left: 300px; >> 

Здесь набор ключевых кадров имеет имя box, которое в последствии будет использовано в свойстве animation. В наборе определяется, что элемент будет изменять значение свойства left от 0 до 300 пикселей. Вместо ключевых слов from и to можно использовать, соответственно, 0% и 100%.

Ключевые кадры не обязательно должны начинаться с 0% и заканчиваться 100%. В этом случае анимация будет происходить не сразу.

CSS синтаксис

@keyframes переменная селектор-ключевого-кадра css-стили;>>

Возможные значения

Обязательный параметр. Определяет процент от продолжительности анимации.

0-100%
from (то же, что и 0%)
to (то же, что и 100%)

Вы можете указывать множество селекторов ключевого кадра в одной анимации.

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

Заставим элемент понемногу сдвигаться вниз на 200px

 /* Safari 4.0 - 8.0 */ @-webkit-keyframes mymove < from to > /* Стандартный синтаксис */ @keyframes mymove < from to > 

@keyframes

Правило @keyframes устанавливает ключевые кадры при анимации элемента. Ключевой кадр это свойства элемента (прозрачность, цвет, положение и др.), которые должны применяться к элементу в заданный момент времени. Таким образом, анимация представляет собой плавный переход стилевых свойств от одного ключевого кадра к другому. Вычисление промежуточных значений между такими кадрами берёт на себя браузер.

Самый простой вариант, когда у нас есть только два ключевых кадра — исходное и конечное состояние (рис. 1).

Рис. 1. Перемещение элемента

В таком случае @keyframes запишется в следующем виде:

@keyframes box < from < left: 0; >to < left: 300px; >>

В данном случае мы даём нашему набору имя box , оно затем будет задействовано в свойстве animation и определяем, что элемент будет изменять значение свойства left от 0 до 300 пикселей. Вместо ключевых слов from и to можно использовать, соответственно, 0% и 100%.

Ключевые кадры не обязательно должны начинаться с 0% и заканчиваться 100%. Анимация тогда будет происходить не сразу.

@keyframes box < 50% < left: 0; >90% < left: 300px; >>

Синтаксис

@keyframes  < [ from | to | ] [, from | to | ]* >

Описание	Пример
	Указывает тип значения.
A && B	Значения должны выводиться в указанном порядке.	&&
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
[ ]	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,]*
+	Повторять один или больше раз.	+
?	Указанный тип, слово или группа не является обязательным.	inset?
	Повторять не менее A, но не более B раз.
#	Повторять один или больше раз через запятую.	#

Значения

<переменная>
Уникальная переменная, которая связывает @keyframes с animation, через это свойство настраивается время анимации и другие её параметры. from Первый ключевой кадр, аналогичен 0%. to Последний ключевой кадр, аналогичен 100%. Устанавливает ключевой кадр в процентах от времени всей анимации.

Пример

Примечание

Chrome до версии 43, Opera до версии 30, Safari до версии 9 и Android поддерживают @-webkit-keyframes .

Firefox до версии 16 поддерживает @-moz-keyframes .

Спецификация

Спецификация	Статус
CSS Animations	Рабочий проект

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

10

12

3

43

15

30

4

9

5

16

2.1

5

16

37

4

9.2

В таблице браузеров применяются следующие обозначения.

• — элемент полностью поддерживается браузером;
• — элемент браузером не воспринимается и игнорируется;
• — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

См. также

• @keyframes в действии
• animation
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function
• Анимации в действии
• Анимация
• Анимация в CSS
• Интересные находки
• Переходы и анимация
• Свойства анимации

Практика

Справочник CSS

• !important
• ::after
• ::backdrop
• ::before
• ::first-letter
• ::first-line
• ::marker
• ::placeholder
• ::selection
• :active
• :blank
• :buffering
• :checked
• :default
• :dir
• :disabled
• :empty
• :enabled
• :first-child
• :first-of-type
• :focus
• :focus-within
• :fullscreen
• :hover
• :in-range
• :indeterminate
• :invalid
• :is()
• :lang()
• :last-child
• :last-of-type
• :link
• :muted
• :not()
• :nth-child()
• :nth-last-child()
• :nth-last-of-type()
• :nth-of-type()
• :only-child
• :only-of-type
• :optional
• :out-of-range
• :paused
• :placeholder-shown
• :playing
• :read-only
• :read-write
• :required
• :root
• :seeking
• :stalled
• :target
• :valid
• :visited
• :volume-locked
• @charset
• @document
• @font-face
• @import
• @keyframes
• @media
• @page
• @supports
• @viewport
• accent-color
• align-content
• align-items
• align-self
• all
• animation
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function
• aspect-ratio
• backdrop-filter
• backface-visibility
• background
• background-attachment
• background-blend-mode
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-position-x
• background-position-y
• background-repeat
• background-size
• block-size
• border
• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-collapse
• border-color
• border-image
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-radius
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-spacing
• border-style
• border-top
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-width
• bottom
• box-decoration-break
• box-shadow
• box-sizing
• caption-side
• caret-color
• clear
• clip
• color
• column-count
• column-fill
• column-gap
• column-rule
• column-rule-color
• column-rule-style
• column-rule-width
• column-span
• column-width
• columns
• content
• counter-increment
• counter-reset
• cursor
• direction
• display
• empty-cells
• filter
• flex
• flex-basis
• flex-direction
• flex-flow
• flex-grow
• flex-shrink
• flex-wrap
• float
• font
• font-family
• font-kerning
• font-size
• font-stretch
• font-style
• font-variant
• font-weight
• gap
• height
• hyphenate-character
• hyphenate-limit-chars
• hyphens
• image-rendering
• justify-content
• left
• letter-spacing
• line-clamp
• line-height
• list-style
• list-style-image
• list-style-position
• list-style-type
• margin
• margin-bottom
• margin-left
• margin-right
• margin-top
• marks
• max-height
• max-width
• min-height
• min-width
• mix-blend-mode
• object-fit
• opacity
• order
• orphans
• outline
• outline-color
• outline-offset
• outline-style
• outline-width
• overflow
• overflow-x
• overflow-y
• padding
• padding-block
• padding-block-end
• padding-block-start
• padding-bottom
• padding-inline
• padding-inline-end
• padding-inline-start
• padding-left
• padding-right
• padding-top
• page-break-after
• page-break-before
• page-break-inside
• perspective
• perspective-origin
• place-content
• pointer-events
• position
• quotes
• resize
• right
• row-gap
• scroll-behavior
• tab-size
• table-layout
• text-align
• text-align-last
• text-decoration
• text-decoration-color
• text-decoration-line
• text-decoration-skip-ink
• text-decoration-style
• text-emphasis
• text-emphasis-color
• text-emphasis-position
• text-emphasis-style
• text-fill-color
• text-indent
• text-orientation
• text-overflow
• text-shadow
• text-stroke
• text-stroke-color
• text-stroke-width
• text-transform
• top
• transform
• transform-origin
• transform-style
• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function
• unicode-bidi
• user-select
• vertical-align
• visibility
• white-space
• widows
• width
• word-break
• word-spacing
• word-wrap
• writing-mode
• z-index
• zoom

@keyframes

Как настоящие художники-постановщики, создаём раскадровку для анимации.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

Обновлено 30 ноября 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

Директива @keyframes используется для создания ключевых кадров CSS-анимаций.

Пример

Скопировать ссылку «Пример» Скопировано

 @keyframes circle-to-square  from  border-radius: 50%; background-color: red; > to  border-radius: 0; background-color: blue; >> @keyframes circle-to-square  from  border-radius: 50%; background-color: red; > to  border-radius: 0; background-color: blue; > >    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Что из себя представляет любая анимация? Это переход от одного состояния элемента к другому состоянию.

Чтобы рассказать браузеру, с чего начать и чем закончить анимацию, используется директива @keyframes .

Как пишется

Скопировать ссылку «Как пишется» Скопировано

После ключевого слова @keyframes мы должны написать имя анимации. Оно понадобится нам, чтобы связать анимацию для конкретного элемента с ключевыми кадрами. Желательно, чтобы имя анимации было уникальным.

Если в коде встречается несколько директив с одинаковыми именами, то будет воспроизводиться последняя, стоящая ниже по коду анимация.

Ключевые кадры могут прописываться при помощи ключевых слов from (начальный кадр) и to (конечный кадр). Это удобно, если у вас всего два ключевых кадра. Если же кадров больше двух, то можно использовать проценты.

 @keyframes circle-to-square  from  border-radius: 50%; background-color: red; > 50%  border-radius: 25%; background-color: green; > to  border-radius: 0; background-color: blue; >> @keyframes circle-to-square  from  border-radius: 50%; background-color: red; > 50%  border-radius: 25%; background-color: green; > to  border-radius: 0; background-color: blue; > >    Скопировать Скопировано Не удалось скопировать   

Браузер расшифровывает ключевое слово from как 0 % , а ключевое слово to как 100 % .

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Задавайте уникальное имя каждой анимации.

�� from равно 0 % , to равно 100 % .

�� Если нужна простая анимация от исходного значения к конечному, то внутри директивы можно указать только финальный кадр.

 @keyframes circle-to-square  to  border-radius: 0; background-color: blue; >> @keyframes circle-to-square  to  border-radius: 0; background-color: blue; > >    Скопировать Скопировано Не удалось скопировать   

Подробнее об анимациях можно прочитать в статье «CSS-анимации».

@keyframes¶

Правило @keyframes управляет промежуточными шагами в последовательности анимации CSS, определяя стили для ключевых кадров последовательности анимации.

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

Переходы и Анимации

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

• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

@keyframes slidein  from  margin-left: 100%; width: 300%; > 50%  margin-left: 50%; width: 200%; > to  margin-left: 0%; width: 100%; > > 

Значения¶

JavaScript может получить доступ к @keyframes правилам с помощью интерфейса объектной модели CSS CSSKeyframesRule .

Чтобы использовать ключевые кадры, создайте правило @keyframes с именем, которое затем используется свойством animation-name . Каждое правило @keyframes содержит список стилей селекторов ключевых кадров, которые определяют проценты вдоль анимации, когда происходит ключевой кадр, и блок, содержащий стили для этого ключевого кадра.

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

Действительные списки ключевых кадров¶

Если правило @keyframes не определяет начальные или конечные состояния анимации (то есть 0%/from и 100%/to , браузеры будут использовать существующие стили этого элемента для состояний начала и конца. Это можно использовать для анимации элемента из его начального состояния и обратно.

Свойства, которые не могут быть анимированы в правилах @keyframes , игнорируются, но поддерживаемые свойства все равно будут анимированы.

Обработка дубликатов¶

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

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

Когда свойства не заданы в некоторых ключевых кадрах¶

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

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

@keyframes identifier  0%  top: 0; left: 0; > 30%  top: 50px; > 68%, 72%  left: 50px; > 100%  top: 100px; left: 100%; > > 

Здесь свойство top анимирует, используя 0% , 30% и 100% ключевые кадры, а анимации для left используют 0% , 68% и 100% ключевые кадры.

Когда ключевой кадр определяется несколько раз¶

Если ключевой кадр определен несколько раз, но не все затронутые свойства находятся в каждом ключевом кадре, учитываются только значения, указанные в последнем ключевом кадре. Например:

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

@keyframes identifier  0%  top: 0; > 50%  top: 30px; left: 20px; > 50%  top: 10px; > 100%  top: 0; > > 

В этом примере на 50% ключевом кадре используется значение top: 10px , а все остальные значения в этом ключевом кадре игнорируются.

Каскадные ключевые кадры поддерживаются начиная с Firefox 14. В приведенном выше примере это означает, что в 50% ключевом кадре будет добавлено значение left: 20px . Это еще не определено в спецификации, но это обсуждается.

!important в ключевых кадрах¶

Объявления в ключевых кадрах с модификатором !important игнорируются:

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

@keyframes important1  from  margin-top: 50px; > 50%  margin-top: 150px !important; > /* ignored */ to  margin-top: 100px; > > @keyframes important2  from  margin-top: 50px; margin-bottom: 100px; > to  margin-top: 150px !important; /* ignored */ margin-bottom: 50px; > > 

Спецификации¶

Поддержка браузерами¶

Can I Use css-animation? Data on support for the css-animation feature across the major browsers from caniuse.com.