@keyframes в CSS


Про CSS

Css Animation

Свойство animation позволяет анимировать элементы страницы.

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

Обязательное условие — наличие конкретных значений. Свойства со значением auto не анимируются.

Сафари в настоящее время не поддерживает анимацию псевдоэлементов, для просмотра записи воспользуйтесь другими браузерами

Пример кода анимации:

move — имя анимации 15s — длительность infinite — бесконечное повторение linear — тип движения

@keyframes

Сама анимация задается внутри блока @keyframes . После @keyframes задается имя анимации, а потом внутри фигурных скобок — её шаги.

Шаги можно задавать через проценты или с помощью ключевых слов from и to . При этом в шагах можно менять тип анимации ( animation-timing-function ):

Animation-name

Используется для задания имени анимации.

Возможные значения: одно или несколько имен анимации. Значение по умолчанию: нет.

animation-name: move; — одна анимация. animation-name: move, sun-color; — две анимации, имена задаются через запятую.

Animation-duration

Длительностью анимации управляет свойство animation-duration .

Возможные значения: время в секундах (s) или миллисекундах (ms). В случае нескольких анимаций время для каждой из них можно задать через запятую. Исходное значение — 0s.

Animation-timing-function

Свойство определяет тип анимации.

Плавная анимация ease — скольжение (значение по умолчанию) linear — ровное движение ease-in — ускорение к концу ease-out — ускорение в начале ease-in-out — более плавное скольжение, чем ease

cubic-bezier(число,число,число,число) позволяет задавать сложный тип анимации. Значения удобно подбирать на cubic-bezier.com.

Пошаговая анимация step-start и step-end — позволяют задать пошаговую анимацию, обязательно задавать конкретные шаги. При этом с step-start изменения происходят в начале шага, а с step-end — в конце.

step-end . Если выставить step-start , счетчик будет начинаться с единиц.

steps(число) — позволяет задать количество шагов, за которые будет выполнена анимация, при этом можно задать только последний шаг без необходимости указывать промежуточные.

Animation-iteration-count

Управляет повторением анимации. Значение по умолчанию: 1 (анимация проигрывается один раз).

число — сколько раз проиграть анимацию. infinite — бесконечное повторение.

Animation-direction

Отвечает за направление анимации.

normal — анимация проигрывается в обычном направлении, с начала и до конца. reverse — анимация проигрывается в обратном направлении, то есть с конца. alternate — анимация проигрывается с начала и до конца, а затем в обратном направлении. alternate-reverse — анимация проигрывается с конца до начала, а затем в обратном направлении.

Animation-play-state

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

Возможные значения: running — анимация проигрывается (значение по умолчанию). paused — анимация застывает на первом шаге.

Управлять шагом, где будет остановка, не получается, но можно останавливать анимацию по :hover :


Animation-delay

С помощью animation-delay можно задавать задержку анимации перед началом воспроизведения.

Возможные значения: время в секундах (s) или миллисекундах (ms). Значения могут быть отрицательными. В случае нескольких анимаций время для каждой из них можно задать через запятую. Исходное значение — 0s.

Animation-fill-mode

Свойство определяет будет ли анимация воздействовать на элемент вне времени воспроизведения анимации.

none — анимация воздействует на элемент только во время воспроизведения, по окончании элемент возвращается в исходное состояние. forwards — анимация воздействует на элемент по окончании воспроизведения. backwards — анимация воздействует на элемент до начала воспроизведения. both — анимация воздействует на элемент и до начала, и после окончания воспроизведения.

Чтобы увидеть как backwards и both работают до начала воспроизведения анимации, задана задержка animation-delay: 3s; . Так же для этого имеет смысл открыть пример в новом окне.

Все эти свойства можно записать с помощью короткой записи, например:

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

CSS свойство @keyframes

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

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

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

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

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

CSS синтаксис

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

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

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

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

Значение Описание
переменная Обязательный параметр. Определяет название анимации, которая связывает @keyframes со свойством animation, настраивающим время анимации и другие её параметры.
селектор-ключевого-кадра
css-стили Обязательный параметр. Один или более допустимых свойств CSS стилей.

Пример

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

Правило @keyframes

Первый этап создания CSS-анимации — это определение ключевых кадров. В ключевом кадре определяется вид той или иной сцены. Таких кадров может быть множество. Когда анимация воспроизводится, браузер двигается от одного ключевого кадра ко второму и прорисовывает промежуточные значения между ними. Яркий пример подобной прорисовки — анимация через transition , где вы предоставляете два ключевых кадра (начальный и конечный стили), а браузер берет на себя работу по просчету промежуточных фаз. Ключевые кадры позволяют создавать большее количество стилей, а не ограничиваться двумя.

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

Структура правила выглядит следующим образом:

Сначала мы объявляем правило с помощью слова @keyframes , после чего указываем название анимации (имя может быть произвольным, но при этом желательно сделать его информативным). Следом, в фигурных скобках записываем ключевые кадры (минимум два). В нашем примере первый кадр начинается ключевым словом from , а второй — словом to . После этого ставятся фигурные скобки, в которых записываются необходимые CSS-свойства в привычном нам формате. Другими словами, каждый ключевой кадр имеет вид обычного стиля CSS, состоящего из набора свойств.

Представим, что мы хотим создать примитивную двухкадровую анимацию, в которой один цвет фона (красный) меняется на другой (зеленый). Мы запишем правило в таком виде:

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

Запись 50% означает, что фон станет желтым ровно в середине анимации. По такому принципу можно добавлять сколько угодно ключевых кадров — просто используйте необходимое число в процентах (30%, 60%, 75% и так далее). Позже, когда будет задана длительность анимации, станет понятно, сколько времени пройдет до появления желтого цвета. К примеру, если вы установите длительность в размере 6 секунд, то желтый цвет фона появится через 3 секунды после старта анимации.

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

Еще более интересно то, что можно создавать паузы в анимации, записывая один набор свойств для нескольких ключевых кадров сразу. Например, чтобы красный цвет сменился на желтый к 33% от длительности анимации, а переход от желтого к зеленому начался после 66%, запишите следующее:

Таким образом мы создадим эффект паузы на временном отрезке с 33% до 66%.


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

Кроссбраузерность

CSS-анимация поддерживается всеми современными браузерами. В Internet Explorer версии 9 и ранее анимация не работает. Некоторые старые версии браузеров, такие как Safari 4–5, iOS Safari 3.2–5.1 и Android Browser 2.1–3, понимают анимацию только при использовании префикса -webkit- .

Далее в учебнике: свойства для запуска анимации — animation-name и animation-duration.

CSS @keyframes Rule

Example

Make an element move gradually 200px down:

More «Try it Yourself» examples below.

Definition and Usage

The @keyframes rule specifies the animation code.

The animation is created by gradually changing from one set of CSS styles to another.

During the animation, you can change the set of CSS styles many times.

Specify when the style change will happen in percent, or with the keywords «from» and «to», which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.

Tip: For best browser support, you should always define both the 0% and the 100% selectors.

Note: Use the animation properties to control the appearance of the animation, and also to bind the animation to selectors.

Note: The !important rule is ignored in a keyframe (See last example on this page).

Browser Support

The numbers in the table specifies the first browser version that fully supports the rule.

Numbers followed by -webkit-, -moz- or -o- specify the first version that worked with a prefix.

Property
@keyframes 43.0
4.0 -webkit-
10.0 16.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-

CSS Syntax

Property Values

Value Description
animationname Required. Defines the name of the animation.
keyframes-selector Required. Percentage of the animation duration.

0-100%
from (same as 0%)
to (same as 100%)

Note: You can have many keyframes-selectors in one animation. css-styles Required. One or more legal CSS style properties

More Examples

Example

Add many keyframe selectors in one animation:

Example

Change many CSS styles in one animation:

Example

Many keyframe selectors with many CSS styles:

Example

Note: The !important rule is ignored in a keyframe:

@keyframes в CSS


В отличие от свойств transform и transition правило @keyframes позволяет анимировать изображения без участия пользователя. Т.е. keyframes анимация происходит на странице сайта сама по себе, независимо от того делаем ли мы какие-то действия мышкой.

Сначала для изображения задаём имя анимации, её длительность и цикл.

Затем описываем ключевые кадры с помощью правила @keyframes.

Примеры keyframes анимации:

CSS3 — анимация

Все современные браузеры, кроме IE9- поддерживают CSS transitions и CSS animations, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript. Анимация применяется к любым html-элементам, а также к псевдоэлементам :before и :after

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

Чтобы воспользоваться анимацией в своём проекте, вам достаточно сделать две вещи:

  1. Создать саму анимацию c помощью ключевого слова @keyframes
  2. Подключить её к элементу, который надо анимировать, и указать нужные свойства.

Правило @keyframes

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

Ключевые кадры анимации создаются с помощью ключевых слов from и to (эквивалентны значениям 0% и 100%) или с помощью процентных пунктов, которых можно задавать сколько угодно. Также можно комбинировать ключевые слова и процентные пункты.

Если не задан начальный ( from , 0%) или конечный ( to , 100%) кадр, браузер установит для них расчётные значения анимируемых свойств такими, какими они были бы если бы не была применена анимация.

Если у двух ключевых кадров будут одинаковые селекторы, то последующий отменит действие предыдущего.

При определении анимации сразу после свойства @keyframes должно следовать имя данной анимации (данное имя затем должно быть указано в свойстве animation элемента, который будет анимирован).

Мы создали анимацию, которая работает следующим образом:

  1. Начало анимации ( from можно было написать 0%) — положение элемента по оси Х равно 0px;
  2. Середина анимации (50%) — положение элемента по оси Х равно 130px;
  3. Конец анимации ( to мы использовали 100%) — возвращаем элемент на начало анимации, т.е. положение элемента по оси Х равно 0px;

See the Pen ONgOQY by Aleksei (@AmateR) on CodePen.0

Здесь и далее для удобства я написал в примерах несколько строчек JavaScript, которые будут поочередно добавлять или удалять класс с анимацией на элементе, поэтому для воспроизведения анимации просто кликните по этому элементу.

Ключевые кадры можно группировать:

Одному элементу можно назначить несколько анимаций, их имена и параметры надо писать в порядке присвоения:

Подключение анимации к элементу происходит двумя командами — animation-name и animation-duration .

Название анимации

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

Длительность анимации

Свойство устанавливает длительность анимации, например: animation-duration: 1s;. Его можно указывать в секундах (3s, 65s, .4s) или в миллисекундах (300ms, 1000ms). Не наследуется.

Временная функция

Свойство animation-timing-function позволяет задать специальную функцию, отвечающую за скорость воспроизведения анимации. Обратим внимание, что скорость воспроизведения анимации чаще всего нелинейная, т.е. ее мгновенная скорость в разных участках будет отличаться. На данный момент существует несколько уже встроенных аргументов для этого правила: ease , ease-in , ease-out , ease-in-out , linear , step-start , step-end .

Однако такие функции можно создавать самому. Специальная функция cubic-bezier (P1x, P1y, P2x, P2y); принимает четыре аргумента и строит на их основе кривую распределения значений в процессе анимации. Потренироваться в создании своих функций и посмотреть как они работают можно на этом сайте.

И, наконец, анимацию можно превратить в набор дискретных значений с помощью функции steps (количество шагов, направление), в качестве аргументов которой задаётся количество её шагов и направление, которое может принимать значения start или end .

  • ease — функция по умолчанию, анимация начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1).
  • linear — анимация происходит равномерно на протяжении всего времени, без колебаний в скорости; соответствует cubic-bezier(0,0,1,1).
  • ease-in — анимация начинается медленно, а затем плавно ускоряется в конце; соответствует cubic-bezier(0.42,0,1,1).
  • ease-out — анимация начинается быстро и плавно замедляется в конце; соответствует cubic-bezier(0,0,0.58,1).
  • ease-in-out — анимация медленно начинается и медленно заканчивается; соответствует cubic-bezier(0.42,0,0.58,1).
  • cubic-bezier(x1, y1, x2, y2) — см.выше.
  • inherit — наследует это свойство от родительского элемента.

See the Pen VaWyjN by Aleksei (@AmateR) on CodePen.0


Анимация с задержкой

Свойство animation-delay определяет задержку до начала воспроизведения анимации, задаётся в секундах или миллисекундах. Отрицательная задержка начинает анимацию с определенного момента внутри её цикла, т.е. со времени, указанного в задержке. Это позволяет применять анимацию к нескольким элементам со сдвигом фазы, изменяя лишь время задержки. Если вы хотите, чтобы анимация началась с середины, задайте отрицательную задержку, равную половине времени, установленном в animation-duration . Не наследуется.

@keyframes

The @keyframes CSS at-rule is used to define the behavior of one cycle of a CSS animation.

Animations are similar to transitions in that they change the presentational value of CSS properties over time. The main difference is that while transitions trigger implicitly when property values change (for example, when a property value changes on hover), animations are explicitly executed when the animation properties are applied. Because of this, animations require explicit values for the properties being animated. These values are defined using animation keyframes specified in the @keyframes rule. So, a @keyframes at-rule is made up of an encapsulated set of CSS style rules that describe how the property values change over time.

Then, using the different CSS animation properties, many aspects of the animation can be controlled, including how many times the animation iterates, whether or not it alternates between the begin and end values, and whether or not the animation should be running or paused. An animation can also delay its start time.

To define an animation you have to start with the @keyframes rule. A @keyframe rule consists of the keyword “@keyframes“, followed by an identifier giving a name for the animation (which will be referenced using animation-name ), followed by a set of style rules (delimited by curly braces). The animation is then applied to an element by using the identifier as a value for the animation-name property. For example:

What goes inside the curly braces of an @keyframes rule?

Inside the curly braces, you define keyframes, or waypoints, that specify the values for the properties you’re animating, at certain points during the animation. This allows you to control the intermediate steps in a sequence of animations. For example, a simple animation @keyframe may look like this:

The ‘0%’ and ‘100%’ are keyframe selectors each of which defines a keyframe rule. The keyframe declaration block for a keyframe rule consists of properties and values.

The above animation is similar to a simple transition effect: the background color is animated from one value at the beginning of the animation (0%) till it reaches another value at the end of the animation (100%). The ‘0%’ and ‘100%’ keyframe selectors define the waypoints, or percentage points in time, that you want the animating properties to change values at. You can also use the selector keywords from and to instead of using 0% and 100%, respectively, as they are equivalent.

A keyframe selector consists of one or multiple comma-separated percentage values or the from and to keywords. Note that the percentage unit specifier must be used on percentage values. Therefore, ‘0’ is an invalid keyframe selector.

The following is an example of an animation with keyframe selectors including multiple comma-separated percentage values and/or the keyword keyframe selectors from and to .

The above @keyframes rule says that the element’s top offset will be equal to zero at the beginning, halfway though, and end of the animation, and that it will be equal to 100px quarter and three quarters of the way through; this means that the element is moving up and down several times through the animation cycle. The above declaration can also be written as follows:

Of course, when you have multiple same declaration blocks, it is useful to use the comma-separated list of keyframe percentages than repeat the blocks multiple times in a @keyframes declaration.

You can animate multiple properties inside a keyframe rule and use multiple keyframes to specify an element’s property values at specific points in time.

For example, suppose you have an element that you want to animate from one position to another, horizontally. Using a CSS transition, you could move it from its initial to its final position, and have the browser calculate the intermediate positions so that the path from the initial to the final position is linear (a straight line). But, using an animation, you can have your element move in a non-linear path from the beginning to the end, by controlling its position at certain points in time during the animation. In the next example, we’re going to move an element from a start position to a final position in a triangular path, instead of a straight line.

What we did in the above @keyframes is we controlled the movement of the element along the x-axis and along the y-axis using the left and top offset properties. We’ve moved the element by 400px to the right, and had it move 200px upwards halfway through (at 50%), before it moved back down at the end of the animation.

The following is the live demo of the above animation, showing the difference between the element being animated like this, and it being transitioned using a CSS transition:

You can also take it further and have the element move in a full triangle path, thus making it move back to its initial position at the end of the animation:

You can also specify a set of keyframes without a ‘0%’ keyframe selector. If a ‘0%’ or from keyframe is not specified, then the user agent constructs a ‘0%’ keyframe using the computed values of the properties being animated. If a ‘100%’ or to keyframe is not specified, then the user agent constructs a ‘100%’ keyframe using the computed values of the properties being animated. If a keyframe selector specifies negative percentage values or values higher than 100%, then the keyframe will be ignored.

The keyframe declaration block for a keyframe rule consists of properties and values, as we have seen, that you want to animate. But, not all properties in CSS are animatable. If a non-animatable property is included in a keyframe rule, the property should be ignored (please see notes section below), with the exception of the animation-timing-function property, which is not animatable, but will not be ignored, because it can be used inside a keyframe rule to specify the easing function used to animate the properties as they move to the next keyframe. For example:

In the above example, five keyframes are specified for the animation named “bounce”. Between the first and second keyframe (i.e., between ‘0%’ and ‘25%’) an ease-out timing function is used. Between the second and third keyframe (i.e., between ‘25%’ and ‘50%’) an ease-in timing function is used. And so on. The effect will appear as an element that moves up the page 50px, slowing down as it reaches its highest point then speeding up as it falls back to 150px. The second half of the animation behaves in a similar manner, but only moves the element 25px up the page. This animation results in a bouncing effect that can be used to simulate a bouncing ball animation. The following is a live demo using the above animation:

A timing function specified on the to or ‘100%’ keyframe is ignored. See the animation-timing-function property entry for more about animation easing functions.

The @keyframes rule that is used by an animation will be the last one encountered in sorted rules order that matches the name of the animation specified by the animation-name property. @keyframes rules do not cascade; therefore, an animation will never derive keyframes from more than one @keyframes rule.

To determine the set of keyframes, all of the values in the selectors are sorted in increasing order by time. If there are any duplicates (for example if you write two ‘50%’ keyframe rules and declaration blocks), then the last keyframe specified inside the @keyframes rule will be used to provide the keyframe information for that time. There is no cascading within a @keyframes rule if multiple keyframes specify the same keyframe selector values.

For example, in the following code snippet, only the second ‘30%’ keyframe rule will be used and hence only the styles provided in its declaration block will be applied. The styles provided in the first ‘30%’ keyframe will not be used.

If a property is not specified for a keyframe, or is specified but invalid, the animation of that property proceeds as if that keyframe did not exist. Conceptually, it is as if a set of keyframes is constructed for each property that is present in any of the keyframes, and an animation is run independently for each property.

The background-color property is missing from the ‘30%’ and ‘48%’ keyframes, and the left property is missing from the ‘60%’ and ‘85%’ keyframes. Hence, the background-color property is animated using the ‘0%’ ( from ), ‘60%’, ‘85%’, and ‘100%’ ( to ) keyframes, and the left property is animated using the ‘0%’, ‘30%’, ‘48%’, and ‘100%’ keyframes.

A property must be specified at least in both the ‘0%’ and ‘100%’ keyframes in order to be animated. Only properties that are specified in both the ‘0%’ and ‘100%’ keyframes will be animated; any property not included in both of those keyframes will retain its starting value for the duration of the animation sequence.

Trivia & Notes

Even though properties that are not animatable should be ignored as per the specification, browser behavior in this regard is non-consistent. Some properties that are stated as not animatable are still animated in some browsers. For example, changing the background image using background-image inside an @keyframes block, the background image is indeed changed and even animated in Chrome, but not in Firefox or IE, for example. The z-index property is an animatable property, but using it inside an @keyframes block you can’t see it animate. Some properties such as the display property, are simply ignored and not applied at all when used inside the @keyframes block. So keep that in mind when you use non-animatable properties in an animation. The specification is still unclear and not very consistent about this at this time. This entry will be updated as soon as it is.

Official Syntax

The to and from keywords are equivalent to ‘100%’ and ‘0%’ respectively. The animation name, the @keyframes identifier, is a custom identifier of the type . See the for a list of possible values and rules.

Examples


In the following example, we’re going to create a falling effect for a piece of text using CSS animations. The text will “swing” and fall down by rotating it using CSS transforms and then fading it out by animating its opacity.

In the keyframes set, we’re going to start with the initial position of the text, when it’s neither transformed nor faded out:

We know that we want the text to be rotated by 90 degrees at the end of the animation, translated downwards and faded out..

By specifying only these two keyframes, this is how the animation looks so far:

As you can see, the fall doesn’t look very realistic. We need the text to rotate first so that it looks like it’s going to fall, by attaching only its left edge to the initial position, and then have it fall down (translate) and fade out from there. We need to control the intermediate steps of the animation, so we’ll specify the rotation and position of the text during the animation using more keyframes.

We want the element to rotate first, and then after rotating we can allow it to fall down by moving to the last keyframe directly. So we can add one more step (keyframe) where we rotate the element, but don’t translate it and don’t fade it out:

Depending on the effect you’re after, the intermediate keyframe can be at ‘50%’ or any other percentage. Sometimes all you have to do is experiment and play with the values to see how it changes the animation. And sometimes a little math can do. In this example, we expect the text to rotate before it falls down, stays a little bit in the “hanging” position, and then fall down. Here is the result of applying the intermediate keyframe to the animation:

We can make the effect more realistic by changing the speed and timing function by which each keyframe animates. We’re going to use the cubic-bezier() timing function to specify a custom easing that adds a “swinging” effect to the text right before it falls down. We’ll add that timing function to the from keyframe selector declaration block because we want it to be applied to the animation when the element is moving from its initial position to its rotated “hanging” position. Similarly, we’re also going to add a timing function to the animation between the intermediate and the final keyframes that makes the falling down appear faster and more realistic.

We’re also going to add one more keyframe at ‘85%’ to make the dropping and fading effect be applied earlier in the cycle, and a keyframe at ‘15%’ because otherwise the element will start the animation instantly and we wouldn’t be able to see its initial state. So our final @keyframes looks like this:

The result of the above keyframe rules is the following. Try playing with the keyframe percentage values and easing functions to get a better feel of how the animation is controlled by them and how you can create your own effects.

Live Demo

In this live demo, we’ve created a shaking effect using @keyframes . The position of the element is alternated between the left and right offsets at different keyframes. The second element is also shaked by the same animation, but, additionally, it is also rotated along the way. Play with the code and change the percentage values and speeds to see how the animation is affected.

Browser Support

CSS Animation

Complex method of animating certain properties of an element

CSS3 сейчас — анимация, прозрачность и многое другое (часть 2)

Продолжая цикл статей «CSS3 сейчас!» (Первая статья — CSS Transitions), хотелось бы рассказать об анимации средствами CSS3, а конкретно — @keyframe и animate. Так же, в статье мы затронем свойства opacity и цветовую модель rgba(), кроссбраузерное использование border-radius, box-shadow и градиентов.

Keyframe

В настоящий момент поддержка такой анимации существует только в браузерах на базе WebKit — Chrome и Safari. Но тема настолько интересна, что стоит её рассмотреть — ведь будущее не за горами, и скоро вслед за Хромом подтянутся и другие браузеры.

Первум пунктом в создании CSS анимации идёт создание keyframe’ов (ключевых кадров). Вообще, Keyframe представляет собой набор правил, которые будут применяться в течение анимации. можно провести грубое сравнение keyframes с функциями — сначала мы объявляем ключевые кадры, и затем вызываем эту анимацию в любом месте CSS.

Сделаем пример простейшей анимации — при наведении на мячик он начинает прыгать.
Мячик:

Теперь создадим ключевые кадры:

Сначала мы задаем имя нашей анимации — в примере это будет «bounce». Затем мы описываем ключевые кадры анимации:
0% < bottom: 0; >— в начале мячик находится на исходной позиции;
50% < bottom: 100px; >— в середине анимации мячик достигает максимальной высоты;
100% < bottom: 0; >— к концу анимации мячик падает на исходное место.

Этим кодом мы задаем анимацию при наведении курсора на мяч. Порядок следующий: .

Готово! Наш мячик скачет, аки колобок! А теперь посмотрите на этот пример. Комбинация box-shadow и keyframes даёт нам замечательный эффект подсветки формы для акцентирования внимания. Его можно использовать, например, при проверке форм для подсветки ошибочных полей.
Код пульсирующей формы:

В коде заметен обещанный rgba(). Как многим уже стало ясно, это цветовая модель RGB + альфа-канал, что позволяет нам задавать полупрозрачность там, где это требуется.

Opacity

А вот это свойство уже можно использовать на всю катушку — оно работает во всех браузерах, кроме нашего любимого. Правда, для IE есть следующий фикс:
filter:prog >
Вот пример полупрозрачной кроссбраузерной кнопки:

Для тех, кто еще не знает — есть замечательная вещь CSS3Pie — она позволяет нам использовать закругленные углы, тень и градиенты уже сейчас и абсолютно кроссбраузерно: IE 6-8, Chrome, Safari, Mozilla, Opera! Пример кроссбраузерного использования всех этих свойств:

Спасибо за внимание и приятной вам вёрстки!

Keyframe Animation Syntax

Easily manage projects with monday.com

Basic Declaration & Usage

For the sake of brevity the rest of the code on this page will not use any prefixes, but real world usage should use all the vendor prefixes from above

Multiple steps


If an animation has the same starting and ending properties, one way to do that is to comma-separate the 0% and 100% values:

Or, you could always tell the animation to run twice (or any even number of times) and tell the direction to alternate .

Calling keyframe animation with separate properties

Animation Shorthand

Just space-separate all the indiv >

Combine transform and animation

Multiple animations

You can comma-separate the values to declare multiple animations on a selector.

Steps()

The steps() function controls exactly how many keyframes will render in the animation timeframe. Let’s say you declare:

If you use steps(10) in your animation, it will make sure only 10 keyframes happen in the allotted time.

The math works out nicely there. Every one second, the element will move 10px to the left and 10px down, until the end of the animation, and then again in reverse forever.

This can be great for spritesheet animation like this demo by simurai.

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Chrome Opera Firefox IE Edge Safari
4* 12* 5* 10 12 5.1*

Mobile / Tablet

iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox
6.0-6.1* 12.1 No 4* 78 68

More Resources

Comments

is from & to equal to using 0% and 100%?

great information i really enjoy it thankx so much

If you use 0%, 50%, and 100% you can have in-betweens.
(ex. 0% nothing 25% grow 50% skew 75% change color 100% shrink)

Hello Chris Coyier,
The tips and tricks are nice, but if you include the demo link then it would be much helpful. For audience to view the effect live and you too to increase potential returning traffic.

Guys – this is the snippets section! It’s literally the only section of the site that doesn’t have demos/tutorials, it’s purely the grab-n-go snippets… As described!

Trust me, there is no better way to learn this stuff than to try and build your own demo.

This is even more true with JavaScript frameworks, and JSFiddle is an invaluable tool to throw down quick and dirty code to figure pieces out.

hi Adam, doesn’t the inability to do what Spence is looking for sort of defeats the purpose of animating in this way?
I’m encountering exactly the same problem. Any further thoughts on how to resolve it without hover approach?

I agree with Hiren. A demo attached to the snippets (whenever possible) would be very nice.

Agreed on the demo attached to snippets. Just something super-simple.

Hi Chris, you can use -webkit-animation-delay to delay the effects.

you can also use shorthand to set multiple declarations in one step:
http://css-infos.net/property/-webkit-animation

Just experimenting, I found the webkit delay syntax is:

Hi and many thanks for the code snippet. Can anyone please help me with the following opacity animation:


The div layer starts invisible it then animates to fully visible (after a 2second delay) and remains in that state.

Currently with the code above (including the delay code) I can only get the following:
The div layer starts visible it then animates (flashes invisible then animates) to fully visible (after a 2second delay) and remains in that state.

If I put an opacity: 0; on the div then the following occurs:
The div layer starts invisible it then animates to fully visible (after a 2second delay) and then returns to invisible.

Is what I am attempting even possible or am I just being a Muppet?

I think what you’re looking for is only possible on hover/state change. This is how you do it:

1. Put your animate attributes on the element(s) you want to animate, ie:

.box <
-webkit-transition: all 0.2s ease-in-out;
>

.box:hover <
background: red;
>

That’s it! Change as necessary.

Adam, doesn’t the inability to do what Spence is looking for sort of defeats the purpose of animating in this way?
I’m encountering exactly the same problem. Any further thoughts on how to resolve it without hover approach?

I was just scratching my head about the same question and came across this page:

I think this is what you’re looking for, you want to use forwards to make the last keyframe of your animation persist so you can make it look as if something has appeared

I also discovered if you use from and to, this behaviour is the default but it you want to use several keyframed states then it will default back to its original state unless you state the fill-mode

Just use -webkit-animation-iteration-count: 1;

cool tut
thank you

Hey Chris! Really informative snippet! You’re blog just keeps getting better and better =)

Anyway, you mistakenly repeated ‘has the same’ in “has the same starting…”

Hi there all!
I’m new to CSS and a bit stuck! I have “2” images 70px By 70px I want “1” to stay still and “2” to rotate. image “2” has just a little dot and image “1” has an inner circle and an outer circle.. So I want the little dot to rotate between the inner and outer circle.. So far I’ve done it but the dot makes a big rotation off the screen!! I don’t no if it’s the stage of my rotation or not using margin’s the right way or the perspective origin not being there or non of the above. Thanks for any help in advance and hope someone knows what I’m going on about

Hi Lee,
It looks like you have to define a different center for the rotation. When you use -webkit-transform: rotate(), you can define the center point for both 2D and 3D rotation with -webkit-transform-origin (http://css-infos.net/property/-webkit-transform-origin)

This is really nice! Thanks guys for sharing this. I’m going to try it now :)

I’ve lost count how many times I’ve come back to this page. A great, simple writeup.

Hello everybody!
What about overriding a @keyframe animation set? I can’t figure out if it’s possible (using chrome).
I explain myself:
I made a webapp with several CSS3 features and @keyframes named sets for UI to interact beautifully. My app is customizable by different connected users. The customization is made by importing a css file that override some colors and layouts. I want people how knows CSS3 awesomness to be able to override my standard animations (triggered via javascript). But it looks like if you write a second @keyframes with the same name than first’s, the second definition is ignored.
Any help with this?

nice content but boring site colors, Older site is much better in terms of colors

thank u chris. love it.

I can not load this page in ie8. The loading time take more…

Hi Jack
I realise in web design terms it’s a lifetime since you made your comment here but I was wondering whether you found a solution. I’ve had this problem for over a week and cannot find an answer.
Through much trial and error it appears IE8 simply will not ignore keyframes and as a result just gives up and freezes.
I’ve tried hiding the animations in a conditional comment and only serving them to IE9 + and all other browsers. Which works as expected, only as you probably know, IE10 does not support conditional comments!
Any help would be greatly appreciated…

Hi guys I want to be able to control the “frames” so I have 5 frames inside of one CSS sprite. They represent each state. I want them to play out over a specified amount of time with out the even motion in between I just want it to go from one frame to another over a specified amount of time. It’s hard for me to explain but flash has a way to do this rather easily.

Hey Chris, I think you want to use the step-start property. I used it on this animation (http://codepen.io/ScottJH/full/IAyEp). I realize this comment is over a year old, but hey, thought I’d contribute if I could.

I found your website very helpful. I learnt & implemented lot of new ideas from your site.

I was thrilled when I learnt this specific animation trick – usage of keyframes. I have implemented this to highlight the Archives on my site ABAP Help when people hover on it.

Thanks again so much for all these tutorials.

Regards,
Naimesh Patel

I have a question about combining animations – when I try the below I get either ‘leaffall’ OR ‘drop’ randomly on refresh. I was expecting both to happen simultaneously.

Anyone seen this problem?

Thank you so much for this snippet, Chris.


Regards from Brazil!

This is great! I was staying away from CSS3 animations because I thought the syntax was too difficult, but you’ve made it pretty simple to understand. Thanks.

For the infinite loop you could change the “to” value to 359deg to prevent it stopping

Its awesome, very easy to understand and a great thank for giving such a wonderful tutorial. I want to know if i want an animation (eg: text animation -fading) on sentance after another how can I achieve it. We do similar kind of text animation when we create presentations.

“The order doesn’t matter except when using both duration and delay, they need to be in that order. In the example below 1s = duration, 2s = delay, 3 = iterations.”

This doesn’t work, if you set the number of iterations to infinite.
Instead infinite has to be at the end, hasn’t it?

Thanks for this useful snippets! :)

It should be noted that the keyframe sequence is effectively “reset” if the element is altered via jQuery or some other thing. Keyframes for cycling through border colors for a play button on a player gets reset everytime the button switches from “play” to “pause”. For instance:

@keyframes change_border
<
0%
25%
75%
100%
>
div#player_control <
animation: change_border 66s infinite;
animation-direction:alternate;
-moz-animation: change_border 66s infinite;
-moz-animation-direction:alternate;
-webkit-animation: change_border 66s infinite;
-webkit-animation-direction:alternate;
>

This “infinite” sequence of color changing would be interrupted every time the #player_control layer was altered. This is undesirable when other things are also tied to this animation sequence, but aren’t subject to the interruption. Could also simply be undesirable.

CSS3 @keyframes правила

примеров

Сделать DIV элемент постепенно перемещается 200 пикселей:

Поддержка браузеров

属性
@keyframes 43.0
4.0 -webkit-
10.0 16.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-

Определения тегов и инструкции

Использование правил @keyframes, вы можете создать анимацию.

Создание анимации путем постепенного изменения настроек от одного стиля к другому CSS.

Во время анимации, вы можете изменить время настройки стиля CSS.

Использование происходит, когда заданное изменение в%, или ключевое слово «от» и «до», и это 0% до 100% идентичны.

0% это начало анимации, 100%, когда анимация завершена.

Для обеспечения оптимальной поддержки браузера, вы всегда должны быть определены как 0% и 100% от селектора.

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

грамматика

значение объяснение
animationname Обязательный параметр. Определить имя анимации.
Ключевые кадры-селектор Обязательный параметр. Процент продолжительности анимации.

0-100%
от (и 0% идентичны)
(и 100% идентичны)

Примечание: Вы можете использовать ключевые кадры анимированного-селекторы.

CSS-стили Обязательный параметр. Один или несколько атрибутов стиля CSS легитимные

Онлайн примеры

примеров

Многие из селектора ключа кадра, чтобы добавить фильм:

примеров

Изменение стилей CSS много в одной анимации:

примеров

Многие искатели ключевой кадр со многими стилями CSS:

Илон Маск рекомендует:  Урок 10. PHP - Функции
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL