Css animation keyframes: Использование CSS-анимации — CSS | MDN

Содержание

Использование CSS-анимации — CSS | MDN

Experimental

Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

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

Есть три преимущества CSS-анимации перед традиционными способами:

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

Чтобы создать CSS-анимацию вы должны добавить в стиль элемента, который хотите анимировать, свойство animation или его подсвойства. Это позволит вам настроить ускорение и продолжительность анимации, а также другие детали того, как анимация должна протекать. Это не поможет вам настроить внешний вид анимации, который настраивается с помощью @keyframes (en-US), рассматриваемой далее в Определение последовательности анимации с помощью ключевых кадров.

Свойство animation имеет следующие подсвойства:

animation-name: Определяет имя @keyframes (en-US), настраивающего кадры анимации.
animation-duration: Определяет время, в течение которого должен пройти один цикл анимации.
animation-timing-function: Настраивает ускорение анимации.
animation-delay: Настраивает задержку между временем загрузки элемента и временем начала анимации.
animation-iteration-count: Определяет количество повторений анимации; вы можете использовать значение infinite для бесконечного повторения анимации.
animation-direction: Даёт возможность при каждом повторе анимации идти по альтернативному пути, либо сбросить все значения и повторить анимацию.
animation-fill-mode: Настраивает значения, используемые анимацией, до и после исполнения.
animation-play-state: Позволяет приостановить и возобновить анимацию.

После того, как вы настроили временные свойства (продолжительность, ускорение) анимации, вы должны определить внешний вид анимации. Это делается с помощью двух и более ключевых кадров после @keyframes (en-US). Каждый кадр описывает, как должен выглядеть анимированный элемент в текущий момент.

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

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

Внимание: Примеры ниже не используют префиксов для CSS стилей . Webkit-браузеры и старые версии других браузеров нуждаются в указании префиксов в CSS стилях. Примеры, на которые вы можете кликнуть в своём браузере, также содержат префиксы -webkit-.

Скольжение текста

Этот простой пример анимирует скольжение текста в элементе <p> от правого края окна браузера.

Обратите внимание на то, что анимация может сделать страницу шире, чем окно браузера. Этого можно избежать, поместив элемент, который будет анимироваться, в контейнер и установив ему свойство overflow: hidden.

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

В стиле для элемента <p> с помощью свойства animation-duration указано, что исполнение анимации от начала до конца должно занять 3 с , и что имя для @keyframes (en-US), описывающей саму анимацию, определено как «slidein».

В элемент <p> можно добавлять и другие пользовательские стили, чтобы как-то украсить его, однако здесь мы хотели продемонстрировать только эффект анимации.

Ключевые кадры определяются с помощью правила @keyframes (en-US). В данном случае мы имеем только два ключевых кадра. Первый при 0% анимации (from). Здесь мы придаём элементу левый отступ в 100% и ширину в 300% (в три раза больше ширины родительского элемента). Это становится причиной того, что при первом кадре анимации заголовок <p> находится за пределами правого края окна браузера .

Второй ключевой кадр (to) определяет конец анимации, т.е (100%). Левый отступ устанавливается равным 0, а ширина 100%. Все выглядит так, будто заголовок <p> приплывает к левому краю окна браузера.

<p>The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.</p>

(Обновите страницу, чтобы увидеть анимацию, или щёлкните по кнопке CodePen, чтобы воспроизвести её в окне CodePen)

Добавление других ключевых кадров

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

75% {
  font-size: 300%;
  margin-left: 25%;
  width: 150%;
}

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }

  75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
  }
}

<p>The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.</p>

Это говорит браузеру о том, что при 75% выполнения анимации, шрифт должен быть 300%, а ширина 150%.

(Обновите страницу, чтобы увидеть анимацию, или щёлкните по кнопке CodePen, чтобы воспроизвести её в окне CodePen)

Настройка повторения

Чтобы настроить повторение, нужно добавить свойство animation-iteration-count и задать ему значение, равное нужному количеству повторений анимаций . В данном случае давайте установим значение infinite для бесконечного повторения:

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

<p>The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.</p>

Движение текста вправо и влево

Итак, мы настроили повторение, но получили нечто странное: текст при каждом повторении снова «запрыгивает» за край окна браузера. То, чего мы хотим, так это чтобы текст двигался влево и вправо. Этого легко достичь с помощью установки свойству animation-direction значения alternate:

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

<p>The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice. </p>

Использование шорткодов

Шорткод animation полезен для экономии места в коде. Например, правило, которое мы используем в этой статье:

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

можно заменить на:

p {
  animation: 3s infinite alternate slidein;
}

Внимание: подробнее об этом на странице раздела animation

Установка нескольких значений свойствам анимации

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

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

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 3s;
animation-iteration-count: 1;

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

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

В третьем примере определены три значения имени анимации, но два значения продолжительности и количества повторений. В случае, когда количества значений недостаточно для каждой анимации, значения берутся циклически от начала до конца. Например, у fadeInOut длительность будет 2.5s, а moveLeft300px — 5s. Значения продолжительности закончились, теперь они берутся сначала — bounce получит продолжительность 2. 5s. Значение количества повторений (а также другие указанные свойства) будет определено таким же образом.

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s;
animation-iteration-count: 2, 1;

Использование событий анимации

Вы можете получить дополнительный контроль над анимацией, а также полезную информацию о ней, с помощью событий анимации. Эти события, представленные объектом AnimationEvent (en-US), можно использовать, чтобы определить, когда начинается и заканчивается анимация или начинается новая итерация. Каждое событие содержит момент времени, когда оно произошло, а также имя анимации, которая вызвала событие.

Мы будем модифицировать текст, чтобы выводить некоторую информацию о каждом событии анимации. Так мы сможем увидеть, как она работает.

Добавление CSS

Начнём с добавления CSS. Анимация будет длиться 3 секунды, будет называться «slidein», будет повторяться 3 раза, а также значение animation-direction установлено alternate. В ключевых кадрах @keyframes (en-US) установлены такие значения ширины и левого отступа, что элемент будет скользить по экрану.

.slidein {
  -moz-animation-duration: 3s;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -moz-animation-name: slidein;
  -webkit-animation-name: slidein;
  animation-name: slidein;
  -moz-animation-iteration-count: 3;
  -webkit-animation-iteration-count: 3;
  animation-iteration-count: 3;
  -moz-animation-direction: alternate;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

@-moz-keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

@-webkit-keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%
  }

  to {
   margin-left: 0%;
   width: 100%;
 }
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%
  }

  to {
   margin-left: 0%;
   width: 100%;
 }
}

Добавление обработчика события анимации

Будем использовать JavaScript для отслеживания всех трёх возможных событий анимации. Следующий код конфигурирует обработчик; мы вызываем его при первой загрузке документа.

var e = document.getElementById("watchme");
e.addEventListener("animationstart", listener, false);
e.addEventListener("animationend", listener, false);
e.addEventListener("animationiteration", listener, false);

e.className = "slidein";

Это довольно стандартный код; вы можете получить дополнительную информацию в документации element.addEventListener(). Последнее, что делает этот код — это установка класса «slidein» для анимируемого элемента; мы делаем это, чтобы запустить анимацию.

Почему? Потому что в нашем случае событие animationstart происходит как только анимация стартует, и это происходит раньше, чем исполняется наш сценарий. Так мы сможем контролировать начало анимации самостоятельно посредством вставки класса «slidein» для анимируемого элемента.

Регистрация событий

События будут передаваться функции listener(), показанной ниже.

function listener(e) {
  var l = document.createElement("li");
  switch(e.type) {
    case "animationstart":
      l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
      break;
    case "animationend":
      l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
      break;
    case "animationiteration":
      l.innerHTML = "New loop started at time " + e.elapsedTime;
      break;
  }
  document.getElementById("output").appendChild(l);
}

Этот код также очень прост. Этот код следит за event.type, чтобы определить тип события, и добавляет элемент <ul>, чтобы залогировать произошедшее событие.

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

Started: elapsed time is 0
New loop started at time 3.01200008392334
New loop started at time 6.00600004196167
Ended: elapsed time is 9.234000205993652

Обратите внимание, что время, указанное в выводе, и время, которое мы указали в стилях, не совпадают. Также обратите внимание, что после окончания итерации не посылается событие animationiteration ; вместо него посылается событие animationend.

HTML

Ради полноты картины приведём код разметки HTML. В разметке имеется тег ul, в который и выводится вся информация:

<body>
  <h2>Watch me move</h2>
  <p>This example shows how to use CSS animations to make <code>p</code> elements
  move across the page.</p>
  <p>In addition, we output some text each time an animation event fires, so you can see them in action.</p>
  <ul>
  </ul>
</body>

Анимация Animations CSS уроки для начинающих академия

Анимация CSS

CSS анимация позволяет анимацию большинства HTML элементов без использования JavaScript или Flash!

CSS

Поддержка браузеров для анимаций

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

Номера -WebKit-, -МОЗ-, или -o- укажат первую версию, которая работала с префиксом.

Свойство
@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-
animation	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?

Анимация позволяет элементу постепенно переходить от одного стиля к другому.

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

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

Ключевые кадры держат какие стили элемент будет иметь в определенное время.

Правило @keyframes

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

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

В следующем примере анимация «example» привязывается к элементу <div>.
Анимация будет длиться 4 секунды, и она будет постепенно менять цвет фона элемента <div> от «Red» на «желтый»:

Пример

/* The animation code */
@keyframes example {

from {background-color: red;}

to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;

background-color: red;

animation-name: example;
    animation-duration: 4s;
}

Примечание: Свойство animation-duration определяет, сколько времени должно занять анимация для завершения. Если свойство animation-duration не задано, анимация не будет выполняться, так как значение по умолчанию равно 0 секундам.

В приведенном выше примере мы указали, когда стиль изменится с помощью ключевых слов «from» и «to» (который представляет 0% (Start) и 100% (полный)).

Также можно использовать процент. С помощью процента можно добавить любое количество изменений стиля.

В следующем примере изменяется цвет фона элемента < div > при завершении анимации на 25%, завершении 50% и повторном завершении анимации на 100%:

Пример

/* The animation code */
@keyframes example
{

0%   {background-color: red;}

25% {background-color: yellow;}

50% {background-color: blue;}

100% {background-color: green;}
}

/* The element to apply the animation to */
div {

width: 100px;
    height: 100px;

background-color: red;
    animation-name: example;

animation-duration: 4s;
}

В следующем примере изменяется как цвет фона, так и положение элемента <div> при завершении анимации на 25%, завершении 50% и снова при завершении анимации 100%:

Пример

/* The animation code */
@keyframes example
{

0%   {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}
}

/* The element to apply the animation to */
div {

width: 100px;
    height: 100px;

position: relative;
    background-color: red;

animation-name: example;

animation-duration: 4s;
}

Задержка анимации

Свойство animation-delay указывает задержку начала анимации.

Следующий пример имеет задержку в 2 секунды перед началом анимации:

Пример

div {

width: 100px;
    height: 100px;

position: relative;
    background-color: red;

animation-name: example;

animation-duration: 4s;
    animation-delay: 2s;
}

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

В следующем примере анимация начнется, как если бы она уже играла в течение 2 секунд:

Пример

div {

width: 100px;
    height: 100px;

position: relative;
    background-color: red;

animation-name: example;

animation-duration: 4s;
    animation-delay: -2s;
}

Установить, сколько раз анимация должна выполняться

Свойство animation-iteration-count указывает, сколько раз должна выполняться анимация.

В следующем примере анимация будет выполняться 3 раза, прежде чем она остановится:

Пример

div {

width: 100px;
    height: 100px;

position: relative;
    background-color: red;

animation-name: example;

animation-duration: 4s;
    animation-iteration-count: 3;
}

В следующем примере используется значение «Infinite» для того, чтобы анимация продолжалась навсегда:

Пример

div {

width: 100px;
    height: 100px;

position: relative;
    background-color: red;

animation-name: example;

animation-duration: 4s;
    animation-iteration-count:
infinite;
}

Запуск анимации в обратном направлении или альтернативные циклы

Свойство animation-direction указывает, следует ли воспроизвести анимацию вперед, назад или в альтернативных циклах.

Свойство «направление анимации» может иметь следующие значения:

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

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

Пример

div {

width: 100px;
    height: 100px;

position: relative;
    background-color: red;

animation-name: example;

animation-duration: 4s;
    animation-direction:
reverse;
}

В следующем примере используется значение «альтернативный», чтобы сначала запустить анимацию вперед, а затем назад:

Пример

div {

width: 100px;
    height: 100px;

position: relative;
    background-color: red;

animation-name: example;

animation-duration: 4s;
    animation-iteration-count: 2;
    animation-direction:
alternate;
}

В следующем примере используется значение «альтернативный-обратный» для того, чтобы анимация сначала пробежала назад, а затем пересылает:

Пример

Укажите кривую скорости анимации

Свойство animation-timing-function определяет кривую скорости анимации.

Свойство «анимация-время-функция» может иметь следующие значения:

ease — Указывает анимацию с медленным запуском, а затем быстро, а затем закончить медленно (это по умолчанию)
linear — Задает анимацию с одинаковой скоростью от начала до конца
ease-in — Задает анимацию с медленным запуском
ease-out — Задает анимацию с медленным концом
ease-in-out — Задает анимацию с медленным началом и концом
cubic-bezier(n,n,n,n) — Позволяет определить собственные значения в функции кубической Безье

В следующем примере показаны некоторые из различных кривых скорости, которые могут быть использованы:

Пример

#div1 {animation-timing-function: linear;}
#div2
{animation-timing-function: ease;}
#div3 {animation-timing-function:
ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5
{animation-timing-function: ease-in-out;}

Задание режима заливки для анимации

Анимация CSS не влияет на элемент до воспроизведения первого ключевого кадра или после воспроизведения последнего ключевого кадра. Свойство «анимация-режим заполнения» может переопределить это поведение.

Свойство animation-fill-mode задает стиль для целевого элемента, если анимация не воспроизводится (до начала, после завершения или и того и другого).

Свойство «анимация-режим заполнения» может иметь следующие значения:

none — Значение по умолчанию. Анимация не будет применять стили к элементу до или после выполнения
forwards — Элемент сохранит значения стиля, заданные последним ключевым кадром (зависит от анимации-направления и анимации-количество итераций)
backwards — Элемент получит значения стиля, заданные первым ключевым кадром (в зависимости от направления анимации), и сохранит это во время анимации-период задержки
both — Анимация будет следовать правилам как вперед, так и назад, расширяя свойства анимации в обоих направлениях

Следующий пример позволяет элементу <div> сохранять значения стиля из последнего ключевого кадра при завершении анимации:

Пример

div {
    width: 100px;
    height: 100px;

background: red;
    position: relative;

animation-name: example;

animation-duration: 3s;
    animation-fill-mode: forwards;
}

Следующий пример позволяет элементу <div> получить значения стиля, заданные первым ключевым кадром до начала анимации (во время периода задержки анимации):

Пример

div {
    width: 100px;
    height: 100px;

background: red;
    position: relative;

animation-name: example;

animation-duration: 3s;

animation-delay: 2s;
    animation-fill-mode: backwards;
}

Следующий пример позволяет элементу <div> получить значения стиля, заданные первым ключевым кадром до начала анимации, и сохранить значения стилей из последнего ключевого кадра при завершении анимации:

Пример

div {
    width: 100px;
    height: 100px;

background: red;
    position: relative;

animation-name: example;

animation-duration: 3s;

animation-delay: 2s;
    animation-fill-mode: both;
}

Анимация Сокращенное свойство

В приведенном ниже примере используются шесть свойств анимации:

Пример

div
{

animation-name: example;

animation-duration: 5s;

animation-timing-function: linear;

animation-delay: 2s;

animation-iteration-count: infinite;

animation-direction: alternate;
}

Такой же эффект анимации, как и выше, можно достичь с помощью сокращенного animation Свойства:

Пример

div
{
animation: example 5s linear 2s infinite alternate;
}

Свойства анимации CSS

В следующей таблице перечислены правила @keyframes и все свойства анимации CSS:

Свойство	Описание
@keyframes	Указывает код анимации
animation	Сокращенное свойство для задания всех свойств анимации
animation-delay	Указывает задержку начала анимации
animation-direction	Указывает, следует ли воспроизвести анимацию вперед, назад или в альтернативных циклах
animation-duration	Указывает, сколько времени должно занять анимация для завершения одного цикла
animation-fill-mode	Задает стиль элемента, если анимация не воспроизводится (до начала, после завершения или и то, и другое)
animation-iteration-count	Указывает, сколько раз должна воспроизводиться анимация
animation-name	Указывает имя анимации @keyframes
animation-play-state	Указывает, запущена ли анимация или приостановлена
animation-timing-function	Задает кривую скорости анимации

CSS анимация (CSS animation & @keyframes) // «Фрилансер по жизни»

easeпо умолчанию

ease-in

ease-out

ease-in-out

linear

steps(int,start|end)

cubic-bezier(x1,y1,x2,y2)

Переход начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1).

CSS код:

/* селектор */

.animation__circle{

width: 100px;
height: 100px;
border-radius: 50%;
background-color: #5e5373;
position: relative;
animation-name: circle;
animation-duration: 1s;
animation-timing-function: ease;

}

/* ключевые кадры */

@keyframes circle{

0%{
left: 0%;
}
50%{
border-radius: 0%;
}
100%{
left: 50%;
}

}

Или (универсальная запись):

/* селектор */

.animation__circle{

/* все те же стили селектора */
animation: circle 1s ease;

}

/* те же ключевые кадры */

Переход начинается медленно, а затем плавно ускоряется в конце. Соответствует cubic-bezier(0.42,0,1,1).

CSS код:

/* селектор */

.animation__circle{

width: 100px;
height: 100px;
border-radius: 50%;
background-color: #5e5373;
position: relative;
animation-name: circle;
animation-duration: 1s;
animation-timing-function: ease-in;

}

/* ключевые кадры */

@keyframes circle{

0%{
left: 0%;
}
50%{
border-radius: 0%;
}
100%{
left: 50%;
}

}

Или (универсальная запись):

/* селектор */

.animation__circle{

/* все те же стили селектора */
animation: circle 1s ease-in;

}

/* те же ключевые кадры */

Переход начинается быстро и плавно замедляется в конце. Соответствует cubic-bezier(0,0,0.58,1).

CSS код:

/* селектор */

.animation__circle{

width: 100px;
height: 100px;
border-radius: 50%;
background-color: #5e5373;
position: relative;
animation-name: circle;
animation-duration: 1s;
animation-timing-function: ease-out;

}

/* ключевые кадры */

@keyframes circle{

0%{
left: 0%;
}
50%{
border-radius: 0%;
}
100%{
left: 50%;
}

}

Или (универсальная запись):

/* селектор */

.animation__circle{

/* все те же стили селектора */
animation: circle 1s ease-out;

}

/* те же ключевые кадры */

Переход медленно начинается и медленно заканчивается. Соответствует cubic-bezier(0.42,0,0.58,1).

CSS код:

/* селектор */

.animation__circle{

width: 100px;
height: 100px;
border-radius: 50%;
background-color: #5e5373;
position: relative;
animation-name: circle;
animation-duration: 1s;
animation-timing-function: ease-in-out;

}

/* ключевые кадры */

@keyframes circle{

0%{
left: 0%;
}
50%{
border-radius: 0%;
}
100%{
left: 50%;
}

}

Или (универсальная запись):

/* селектор */

.animation__circle{

/* все те же стили селектора */
animation: circle 1s ease-in-out;

}

/* те же ключевые кадры */

Переход происходит равномерно на протяжении всего времени, без колебаний в скорости. Соответствует cubic-bezier(0,0,1,1).

CSS код:

/* селектор */

.animation__circle{

width: 100px;
height: 100px;
border-radius: 50%;
background-color: #5e5373;
position: relative;
animation-name: circle;
animation-duration: 1s;
animation-timing-function: linear;

}

/* ключевые кадры */

@keyframes circle{

0%{
left: 0%;
}
50%{
border-radius: 0%;
}
100%{
left: 50%;
}

}

Или (универсальная запись):

/* селектор */

.animation__circle{

/* все те же стили селектора */
animation: circle 1s linear;

}

/* те же ключевые кадры */

Временная функция позволяет разбить анимацию на чёткое количество шагов указанных в int. Так же можно задать момент выполнения: Start – означает, что при начале анимации нужно сразу применить первое изменение. End — означало бы, что изменения нужно применять не в начале, а в конце каждого шага.

CSS код:

/* селектор */

.animation__circle{

width: 100px;
height: 100px;
border-radius: 50%;
background-color: #5e5373;
position: relative;
animation-name: circle;
animation-duration: 1s;
animation-timing-function: steps(2,start);

}

/* ключевые кадры */

@keyframes circle{

0%{
left: 0%;
}
50%{
border-radius: 0%;
}
100%{
left: 50%;
}

}

Или (универсальная запись):

/* селектор */

.animation__circle{

/* все те же стили селектора */
animation: circle 1s steps(2,start);

}

/* те же ключевые кадры */

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

Пользовательские функции cubic Bézier с сайта easings.net

Название	Значение функции
easeInSine	`cubic-bezier(0.47, 0, 0.745, 0.715)`
easeOutSine	`cubic-bezier(0.39, 0.575, 0.565, 1)`
easeInOutSine	`cubic-bezier(0.445, 0.05, 0.55, 0.95)`
easeInQuad	`cubic-bezier(0.55, 0.085, 0.68, 0.53)`
easeOutQuad	`cubic-bezier(0.25, 0.46, 0.45, 0.94)`
easeInOutQuad	`cubic-bezier(0.455, 0.03, 0.515, 0.955)`
easeInCubic	`cubic-bezier(0.55, 0.055, 0.675, 0.19)`
easeOutCubic	`cubic-bezier(0.215, 0.61, 0.355, 1)`
easeInOutCubic	`cubic-bezier(0.645, 0.045, 0.355, 1)`
easeInQuart	`cubic-bezier(0.895, 0.03, 0.685, 0.22)`
easeOutQuart	`cubic-bezier(0.165, 0.84, 0.44, 1)`
easeInOutQuart	`cubic-bezier(0.77, 0, 0.175, 1)`
easeInQuint	`cubic-bezier(0.755, 0.05, 0.855, 0.06)`
easeOutQuint	`cubic-bezier(0.23, 1, 0.32, 1)`
easeInOutQuint	`cubic-bezier(0.86, 0, 0.07, 1)`
easeInExpo	`cubic-bezier(0.95, 0.05, 0.795, 0.035)`
easeOutExpo	`cubic-bezier(0.19, 1, 0.22, 1)`
easeInOutExpo	`cubic-bezier(1, 0, 0, 1)`
easeInCirc	`cubic-bezier(0.6, 0.04, 0.98, 0.335)`
easeOutCirc	`cubic-bezier(0.075, 0.82, 0.165, 1)`
easeInOutCirc	`cubic-bezier(0.785, 0.135, 0.15, 0.86)`
easeInBack	`cubic-bezier(0.6, -0.28, 0.735, 0.045)`
easeOutBack	`cubic-bezier(0.175, 0.885, 0.32, 1.275)`
easeInOutBack	`cubic-bezier(0.68, -0.55, 0.265, 1.55)`

CSS код:

/* селектор */

.animation__circle{

}

/* ключевые кадры */

@keyframes circle{

0%{
left: 0%;
}
50%{
border-radius: 0%;
}
100%{
left: 50%;
}

}

Или (универсальная запись):

/* селектор */

.animation__circle{

/* все те же стили селектора */
animation: circle 1s cubic-bezier(0.68,-0.55,0.265,1.55);

}

/* те же ключевые кадры */

animation-delay | htmlbook.ru

Internet Explorer	Chrome	Opera		Safari	Firefox		Android	iOS
10.0+	3.0+	12.0+	12.10+	4.0+	5.0+	16.0+	3.0+	2.0+

Краткая информация

Версии CSS

Описание

Свойство animation-delay устанавливает время ожидания перед воспроизведением анимации. Значение 0s или 0ms, которое установлено по умолчанию, запускает анимацию сразу же, как только она применяется к элементу. Отрицательное значение также включает анимацию без задержек, но приводит к изменению последовательности начала анимации.

Допустимо указывать несколько значений, перечисляя их через запятую. Каждое значение будет применяться к свойству, заданному в параметрах animation-name.

Синтаксис

animation-delay: <время>[, <время>]*

Значения

См. время.

Пример

HTML5CSS3IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>animation-delay</title>
  <style>
   @-webkit-keyframes flash {
    0%, 100% {opacity: 1;} 
    50% {opacity: 0;}
   }
   @-moz-keyframes flash {
    0%, 100% {opacity: 1;} 
    50% {opacity: 0;}
   }
   @-o-keyframes flash {
    0%, 100% {opacity: 1;} 
    50% {opacity: 0;}
   }
   @keyframes flash {
    0%, 100% {opacity: 1;} 
    50% {opacity: 0;}
   }
   .flash {
    -webkit-animation-name: flash;
    -moz-animation-name: flash;
    -o-animation-name: flash;
    animation-name: flash;
    /* Задержка перед началом */
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    animation-delay: 1s;
    /* Продолжительность анимации */
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
   }
  </style>
 </head>
 <body>
  <h2>Добро пожаловать!</h2>
 </body>
</html>

Объектная модель

[window.]document.getElementById(«elementID»).style.animationDelay

Браузеры

Chrome, Safari, Android и iOS поддерживают нестандартное свойство -webkit-animation-delay.

Opera до версии 12.10 поддерживает нестандартное свойство -o-animation-delay.

Firefox до версии 16.0 поддерживает нестандартное свойство -moz-animaition-delay.

HTML и CSS с примерами кода

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

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

@-правила
Переходы и Анимации

Синтаксис

@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 нет каскадирования, если несколько ключевых кадров определяют одинаковые процентные значения.

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

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

@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% ключевые кадры.

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

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

@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 игнорируются:

@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.

CSS от А до Я: keyframe анимация

От автора: приветствую вас в нашей серии уроков CSS от А до Я! В этой серии я расскажу вам про CSS значения и свойства, начинающиеся с различных букв алфавита. Иногда обучающего ролика бывает недостаточно, и в этой статье я дам вам пару быстрых советов по работе с keyframe анимацией.

K значит @keyframes

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

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

Совет 1

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

@keyframes pulse {
0%, 50% {font-size: 10px;}
25%, 100% {font-size: 20px;}
}

/* то же самое, что */
h2, h3, h4 {
font-family: ‘Avenir’, sans-serif;
}

@keyframes pulse {

0%, 50% {font-size: 10px;}

25%, 100% {font-size: 20px;}

}

/* то же самое, что */

h2, h3, h4 {

font-family: ‘Avenir’, sans-serif;

}

Совет 2

CSS анимация имеет хорошую поддержку в браузерах. На момент написания статьи поддержка составляла 89.5%, и во всех браузерах @keyframes и свойство animation работали без префиксов.

Тем не менее, для обратной поддержки Safari 8 и iOS 8.4 и ниже вам придется использовать префикс –webkit, чтобы анимация работала. Как и все те крошечные изменения, которые необходимо произвести во множестве мест, добавление префикса вручную может сильно раздуть и усложнить ваш код. Такой подход может привести к человеческим ошибкам.
Есть два способа поддерживать код чистым и избежать необходимости ручных правок и повторений.

Можно воспользоваться безпрефиксной JavaScript библиотекой от Ли Вероу. Библиотека за вас добавит все префиксы. Вы пишите обычный код без префиксов, а скрипт запускается в браузере и вставляет все необходимые префиксы за вас. Скрипт проверяет поддержку конкретного свойства, которое используется на данной странице.

Также можно пойти путем Autoprefixer. Это постпроцессор CSS, который необходимо запустить после написания кода без префиксов. Зачастую идет в комплекте с таск раннерами типа Grunt или Gulp. Autoprefixer берет всю информацию с сайта Caniuse и определяет необходимые префиксы.

Лично я предпочитаю Autoprefixer с таск раннером Gulp и уже который месяц не прописываю вендорные префиксы вручную. Отличный совет по ускорению рабочего процесса, который работает для всех свойств, а не только для @keyframes!

Автор: Guy Routledge

Источник: //www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Transitions vs Animations — CSS Animation

При анимации в сети, ты используешь transition (переходы) или animation (анимации)? Бывают случаи, когда ты предпочитаешь выбрать один вместо другого. Давай поговорим о различиях.

Что такое Transitions?

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

В большинстве случаев мы видим состояния переходов, которые используются при наведении курсора мыши или когда информацию на страницу добавляем/удаляем. С помощью hover могут быть мелкие изменения в цвете шрифта, а информация на странице может то постепенно исчезать, то появляться.

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

Когда использовать

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

Переход будет работать хорошо, когда кто-то навет мышку/нажмет на кнопку:

Shiny effect

Или при добавлении элемента на страницу:

Add a list item

Что такое Animations?

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

Если transition устанавливает переход только от А до B, то animation может и A, и B, и C и даже D. Или любое другое количество этапов по мере необходимости.

Animations добивается этого с помощью набора ключевых кадров (keyframes). Если переход может быть определен одной строкой в классе, то анимация работает посредством ссылки на набор ключевых кадров(@keyframes), которые описаны отдельно в CSS.

Когда использовать

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

Например: нужна анимация на странице, которая начинает работать по прошествии определенного периода времени, как этот эффект мигания персонажа Baymax:

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

Иногда это не очевидно

В недавним посте начал с анимации, но затем стал использовать transitions.

Когда я начала разрабатывать эти часы, стрелки у меня должны были беспрерывно двигаться начиная с загрузки. Это был наглядный пример для использования свойства animation. Анимация начиналась после загрузки и должна была продолжаться бесконечно. Когда я начал усложнять, то я обнаружил, что имеет смысл сделать с помощью JavaScript.

По мере использования JavaScript, становилось понятно что с выбором ошибся и transitions лучше подходит. Когда JavaScript изменяет положение стрелки, CSS transition обрабатывает изменение (из состояния А в состояние В) более элегантно, чем при помощи анимации.

Чтобы получить больше информации кликни по уроку CSS часы.

Заключение

Transition для создания плавного перехода от одного состояния к другому, а animation для более сложной последовательности серии передвижений.

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

CSS-анимаций

CSS-анимации

CSS позволяет анимировать элементы HTML без использования JavaScript или Flash!

CSS

В этой главе вы узнаете о следующих свойствах:

@keyframes
название анимации
продолжительность анимации
задержка анимации
количество итераций анимации
направление анимации
функция синхронизации анимации
режим заливки анимации
анимация

Браузер Поддержка анимации

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Имущество
@keyframes	43,0	10,0	16,0	9,0	30,0
название анимации	43,0	10,0	16,0	9,0	30.0
продолжительность анимации	43,0	10,0	16,0	9,0	30,0
задержка анимации	43,0	10,0	16,0	9,0	30,0
количество итераций анимации	43,0	10,0	16.0	9,0	30,0
анимация-направление	43,0	10,0	16,0	9,0	30,0
функция синхронизации анимации	43,0	10,0	16,0	9,0	30,0
режим заливки анимации	43.0	10,0	16,0	9,0	30,0
анимация	43,0	10,0	16,0	9,0	30,0

Что такое CSS-анимация?

Анимация позволяет элементу постепенно переходить от одного стиля к другому.

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

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

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

Правило @keyframes

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

Чтобы анимация работала, необходимо привязать анимацию к элементу.

В следующем примере «пример» анимации привязывается к элементу

.Анимация будет длиться 4 секунды, и она будет постепенно менять
цвет фона элемента

от «красного» до «желтого»:

Пример

/ * Код анимации * /
Пример @keyframes {
из {background-color: red;}

к {background-color: yellow;}
}

/ * Элемент, к которому применяется анимация * /
div {
width: 100px;
высота: 100 пикселей;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
}

Попробуй сам »

Примечание: Свойство animation-duration
определяет, сколько времени должно занять анимация.Если свойство animation-duration не указано,
анимации не будет, потому что
значение по умолчанию — 0 с (0 секунд).

В приведенном выше примере мы указали, когда стиль изменится, используя
ключевые слова «от» и «до» (что означает 0% (начало) и 100% (завершено)).

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

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

элемент, когда анимация завершена на 25%, завершена на 50% и снова, когда анимация завершена на 100%:

Пример

/ * Код анимации * /
пример @keyframes
{
0% {background-color: red;}

25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}

/ * Элемент, к которому применяется анимация * /
div {
ширина: 100 пикселей;
высота: 100 пикселей;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
}

Попробуй сам »

В следующем примере будут изменены и цвет фона, и положение

элемент, когда анимация завершена на 25%, завершена на 50% и снова, когда анимация завершена на 100%:

Пример

/ * Код анимации * /
пример @keyframes
{
0% {background-color: red; слева: 0px; top: 0px;}

25% {цвет фона: желтый; слева: 200 пикселей; top: 0px;}

50% {цвет фона: синий; слева: 200 пикселей; top: 200px;}

75% {цвет фона: зеленый; слева: 0px; top: 200px;}

100% {цвет фона: красный; слева: 0px; top: 0px;}
}

/ * Элемент, к которому применяется анимация * /
div {
ширина: 100 пикселей;
высота: 100 пикселей;
положение: относительное;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
}

Попробуй сам »

Задержка анимации

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

В следующем примере перед запуском анимации задана задержка в 2 секунды:

Пример

div {
ширина: 100 пикселей;
высота: 100 пикселей;
положение: относительное;
цвет фона: красный;
имя-анимации: пример;

продолжительность анимации: 4 секунды;
задержка анимации: 2 с;
}

Попробуй сам »

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

В следующем примере анимация начнется так, как если бы она уже была
играет за 2 секунды:

Пример

div {
ширина: 100 пикселей;
высота: 100 пикселей;
положение: относительное;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 секунды;
анимация-задержка: -2 с;
}

Попробуй сам »

Установить, сколько раз анимация должна запускаться

Свойство animation-iteration-count определяет, сколько раз должна запускаться анимация.

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

Пример

div {
width: 100px;
высота: 100 пикселей;
позиция: относительная;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
количество итераций анимации: 3;
}

Попробуй сам »

В следующем примере для анимации используется значение «бесконечность».
продолжаться вечно:

Пример

div {
ширина: 100 пикселей;
высота: 100 пикселей;
положение: относительное;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
количество итераций анимации:
бесконечный;
}

Попробуй сам »

Анимация запуска в обратном направлении или с чередованием циклов

Свойство animation-direction указывает
следует ли воспроизводить анимацию вперед, назад или поочередно
циклы.

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

normal — Анимация воспроизводится как обычно
(нападающие). Это значение по умолчанию
reverse — Анимация воспроизводится в
обратное направление (назад)
альтернативный — Воспроизводится анимация
сначала вперед, затем назад
альтернативно-обратный — Анимация воспроизводится
сначала назад, затем вперед

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

Пример

div {
ширина: 100 пикселей;
высота: 100 пикселей;
положение: относительное;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 секунды;
анимация-направление:
обеспечить регресс;
}

Попробуй сам »

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

Пример

Попробуй сам »

В следующем примере значение «alternate-reverse» используется для создания анимации.
сначала бежать назад, затем вперед:

Пример

div {
width: 100px;
высота: 100 пикселей;
положение: относительное;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
количество итераций анимации: 2;
анимация-направление:
альтернативно-реверсивный;
}

Попробуй сам »

Укажите кривую скорости анимации

Свойство функции синхронизации анимации определяет кривую скорости
анимация.

Свойство функции-времени-анимации может иметь следующие значения:

легкость — задает анимацию с медленным началом, затем быстрым, а затем медленным завершением (по умолчанию)
linear — Задает анимацию с одинаковой скоростью от начала до конца
easy-in — Определяет анимацию с медленным запуском
easy-out — Определяет анимацию с медленным концом
easy-in-out — Определяет анимацию с медленным началом и концом
cubic-bezier (n, n, n, n) — Позволяет вам определять свои собственные значения в кубической функции Безье

В следующем примере показаны некоторые из различных кривых скорости, которые можно использовать:

Пример

# div1 {функция-время-анимации: линейная;}
# div2
{функция-время-анимации: легкость;}
# div3 {функция-времени-анимации:
easy-in;}
# div4 {функция-тайминга-анимации: easy-out;}
# div5
{анимация-тайминги-функция: легкость входа;}

Попробуй сам »

Укажите режим заливки для анимации

CSS-анимация не влияет на элемент до воспроизведения первого ключевого кадра
или после воспроизведения последнего ключевого кадра.Свойство animation-fill-mode может
переопределить это поведение.

Свойство animation-fill-mode определяет
стиль для целевого элемента, когда анимация не воспроизводится (до этого
начинается, после окончания или и то, и другое).

Свойство animation-fill-mode может иметь следующие значения:

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

В следующем примере элемент

сохраняет значения стиля из
последний ключевой кадр по окончании анимации:

Пример

div {
width: 100px;
высота: 100 пикселей;
фон: красный;
позиция: относительная;
имя-анимации: пример;
продолжительность анимации: 3 с;
режим заливки-анимации: вперед;
}

Попробуй сам »

В следующем примере элемент

получает значения стиля, установленные
первый ключевой кадр перед запуском анимации (в течение периода задержки анимации):

Пример

div {
width: 100px;
высота: 100 пикселей;
фон: красный;
позиция: относительная;
имя-анимации: пример;
продолжительность анимации: 3 секунды;
задержка анимации: 2 с;
Animation-fill-mode: backwards;
}

Попробуй сам »

Следующий пример позволяет элементу

получить установленные значения стиля.
по первому ключевому кадру перед запуском анимации и сохраните значения стиля
от последнего ключевого кадра по окончании анимации:

Пример

div {
width: 100px;
высота: 100 пикселей;
фон: красный;
положение: относительное;
имя-анимации: пример;
продолжительность анимации: 3 секунды;
задержка анимации: 2 с;
Animation-fill-mode: both;
}

Попробуй сам »

Свойство сокращения анимации

В приведенном ниже примере используются шесть свойств анимации:

Пример

div
{
имя-анимации: пример;

продолжительность анимации: 5 с;

функция-время-анимация: линейная;

задержка анимации: 2 с;

количество итераций анимации: бесконечно;

направление анимации: альтернативное;
}

Попробуй сам »

Тот же эффект анимации, что и выше, может быть достигнут с помощью сокращения
анимация свойство:

Проверьте себя упражнениями!

Свойства анимации CSS

В следующей таблице перечислены правило @keyframes и все свойства анимации CSS:

CSS @keyframes Правило

Пример

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

@keyframes mymove
{

от {top: 0px;}

на {top: 200px;}
}

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.

Определение и использование

Правило @keyframes определяет код анимации.

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

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

Укажите, когда будет происходить изменение стиля, в процентах или с помощью ключевых слов «from» и
«к», что означает 0% и 100%. 0% — это начало анимации, 100% — когда анимация завершена.

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

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

Примечание: Правило! Important игнорируется в ключевом кадре (см. Последний пример на этой странице).

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

Цифры в таблице указывают первую версию браузера, полностью поддерживающую
правило.

Числа, за которыми следуют -webkit-, -moz- или -o- указывают первую версию, которая работала с префиксом.

Имущество
@keyframes	43,0 4,0 -webkit-	10,0	16,0 5,0 -моз-	9,0 4,0 -webkit-	30,0 15,0 -webkit- 12.0 -o-

Синтаксис CSS

@keyframes animationname { keyframes-selector { css-styles;} }

Стоимость недвижимости

Значение	Описание
имя анимации	Обязательно. Определяет имя анимации.
селектор ключевых кадров	Обязательно.Процент продолжительности анимации. Допустимые значения: 0-100% от (как 0%) to (то же, что и 100%) Примечание: У вас может быть несколько селекторов ключевых кадров в одной анимации.
CSS-стили	Обязательно. Одно или несколько допустимых свойств стиля CSS

Значение

Описание

имя анимации

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

селектор ключевых кадров

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

Допустимые значения:

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

Примечание: У вас может быть несколько селекторов ключевых кадров в одной анимации.

CSS-стили

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

Другие примеры

Пример

Добавить несколько селекторов ключевых кадров в одну анимацию:

@keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}

Попробуй сам »

Пример

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

@keyframes mymove
{

0% {top: 0px; фон: красный; width: 100px;}
100% {top: 200px; фон: желтый; width: 300px;}
}

Попробуй сам »

Пример

Множество селекторов ключевых кадров с множеством стилей CSS:

@keyframes mymove
{

0% {top: 0px; слева: 0px; фон: красный;}
25% {top: 0px; слева: 100 пикселей; фон: синий;}
50% {top: 100px; слева: 100 пикселей; фон: желтый;}

75% {top: 100px; слева: 0px; фон: зеленый;}

100% {top: 0px; слева: 0px; фон: красный;}
}

Попробуй сам »

Пример

Примечание: Правило! Important игнорируется в ключевом кадре:

@keyframes myexample
{

from {top: 0px;}
50% {top: 100px! important;} / * игнорируется
* /

на {top: 200px;}
}

Попробуй сам »

Связанные страницы

Учебник

CSS: Анимация CSS

Использование CSS-анимации — CSS: каскадные таблицы стилей

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

У CSS-анимации есть три ключевых преимущества по сравнению с традиционными методами анимации, управляемой сценариями:

Их легко использовать для простой анимации; вы можете создавать их, даже не зная JavaScript.
Анимация работает хорошо даже при средней загрузке системы.Простые анимации часто плохо работают в JavaScript. Механизм рендеринга может использовать пропуск кадров и другие методы, чтобы поддерживать производительность как можно более плавной.
Разрешение браузеру управлять последовательностью анимации позволяет браузеру оптимизировать производительность и эффективность, например, уменьшая частоту обновления анимаций, запущенных на вкладках, которые в настоящее время не отображаются.

Чтобы создать последовательность анимации CSS, вы задаете стиль элементу, который хотите анимировать, с помощью свойства animation или его вспомогательных свойств.Это позволяет вам настроить время, продолжительность и другие детали того, как должна развиваться последовательность анимации. Это не , а не , настраивает фактический внешний вид анимации, что выполняется с использованием правила @keyframes , как описано в разделе «Определение последовательности анимации с использованием ключевых кадров» ниже.

Подсвойства свойства анимации :

имя-анимации: Задает имя at-правила @keyframes , описывающего ключевые кадры анимации.
продолжительность анимации: Задает продолжительность одного цикла анимации.
функция синхронизации анимации: Настраивает время анимации; то есть, как анимация переходит через ключевые кадры, устанавливая кривые ускорения.
задержка анимации: Задает задержку между временем загрузки элемента и началом анимационной последовательности.
количество итераций анимации: Задает количество повторов анимации; вы можете указать infinite , чтобы повторять анимацию бесконечно.
направление анимации: Определяет, должна ли анимация менять направление при каждом прохождении последовательности или сбрасываться до начальной точки и повторяться.
режим заливки-анимации: Задает значения, применяемые анимацией до и после ее выполнения.
состояние воспроизведения анимации: Позволяет приостановить и возобновить последовательность анимации.

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

Поскольку синхронизация анимации определяется в стиле CSS, который конфигурирует анимацию, ключевые кадры используют <процент> , чтобы указать время во время последовательности анимации, в которой они происходят.0% указывает на первый момент последовательности анимации, а 100% указывает на конечное состояние анимации. Поскольку эти два времени так важны, у них есть специальные псевдонимы: от и с до . Оба варианта не обязательны. Если от / 0% или до / 100% не указано, браузер запускает или завершает анимацию, используя вычисленные значения всех атрибутов.

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

Примечание: Некоторым старым браузерам (до 2017 года) могут потребоваться префиксы; живые примеры, которые вы можете просмотреть в браузере, включают синтаксис с префиксом -webkit .

Создание скольжения текста по окну браузера

Этот простой пример стилизует элемент

таким образом, чтобы текст скользил внутрь с правого края окна браузера.

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

  п {
  продолжительность анимации: 3 секунды;
  имя-анимации: слайдин;
}

@keyframes slidein {
  из {
    маржа слева: 100%;
    ширина: 300%;
  }

  к {
    маржа слева: 0%;
    ширина: 100%;
  }
}

В этом примере стиль для элемента

указывает, что анимация должна выполняться в течение 3 секунд от начала до конца, с использованием свойства animation-duration и что имя @keyframes at- Правило, определяющее ключевые кадры для анимационной последовательности, называется «slidein».

Если бы мы хотели, чтобы какой-либо пользовательский стиль для элемента

отображался в браузерах, не поддерживающих анимацию CSS, мы бы также включили его сюда; однако в этом случае нам не нужны никакие другие стили, кроме эффекта анимации.

Ключевые кадры определяются с использованием правила @keyframes . В этом случае у нас всего два ключевых кадра. Первый происходит при 0% (с использованием псевдонима из ). Здесь мы настраиваем левое поле элемента на 100% (то есть на дальнем правом краю содержащего элемента), а ширину элемента на 300% (или в три раза больше ширины содержащего элемента ).Это приводит к тому, что заголовок первого кадра анимации выводится за правый край окна браузера.

Второй (и последний) ключевой кадр находится на уровне 100% (с использованием псевдонима от до ). Левое поле установлено на 0%, а ширина элемента установлена на 100%. Это приводит к тому, что заголовок заканчивает свою анимацию вплотную к левому краю области содержимого.

   Гусеница и Алиса некоторое время молча смотрели друг на друга:
наконец Гусеница вынула кальян изо рта и обратилась к
ее вялым, сонным голосом.

Примечание : Обновите страницу, чтобы увидеть анимацию, или нажмите кнопку CodePen, чтобы просмотреть анимацию в среде CodePen.

Добавление еще одного ключевого кадра

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

  75% {
  размер шрифта: 300%;
  маржа слева: 25%;
  ширина: 150%;
}

Полный код теперь выглядит так:

  п {
  продолжительность анимации: 3 секунды;
  имя-анимации: слайдин;
}

@keyframes slidein {
  из {
    маржа слева: 100%;
    ширина: 300%;
  }

  75% {
    размер шрифта: 300%;
    маржа слева: 25%;
    ширина: 150%;
  }

  к {
    маржа слева: 0%;
    ширина: 100%;
  }
}

   Гусеница и Алиса некоторое время молча смотрели друг на друга:
наконец Гусеница вынула кальян изо рта и обратилась к
ее вялым, сонным голосом.

Это сообщает браузеру, что 75% пути через последовательность анимации заголовок должен иметь левое поле 25%, а ширина должна быть 150%.

Создание повторения

Чтобы анимация повторялась, используйте свойство animation-iteration-count , чтобы указать, сколько раз повторять анимацию.В этом случае давайте используем infinite , чтобы анимация повторялась бесконечно:

  п {
  продолжительность анимации: 3 секунды;
  имя-анимации: слайдин;
  количество итераций анимации: бесконечно;
}

Добавляем к существующему коду:

  @keyframes slidein {
  из {
    маржа слева: 100%;
    ширина: 300%;
  }

  к {
    маржа слева: 0%;
    ширина: 100%;
  }
}

   Гусеница и Алиса некоторое время молча смотрели друг на друга:
наконец Гусеница вынула кальян изо рта и обратилась к
ее вялым, сонным голосом.

Заставляет его двигаться вперед и назад

Это заставляет его повторяться, но очень странно, когда он возвращается к началу каждый раз, когда начинается анимация. На самом деле мы хотим, чтобы он двигался вперед и назад по экрану. Это легко сделать, установив animation-direction на alternate :

  п {
  продолжительность анимации: 3 секунды;
  имя-анимации: слайдин;
  количество итераций анимации: бесконечно;
  направление анимации: альтернативное;
}

А остальной код:

  @keyframes slidein {
  из {
    маржа слева: 100%;
    ширина: 300%;
  }

  к {
    маржа слева: 0%;
    ширина: 100%;
  }
}

   Гусеница и Алиса некоторое время молча смотрели друг на друга:
наконец Гусеница вынула кальян изо рта и обратилась к
ее вялым, сонным голосом.

Использование сокращения анимации

Сокращение анимации полезно для экономии места. Например, правило, которое мы использовали в этой статье:

  п {
  продолжительность анимации: 3 секунды;
  имя-анимации: слайдин;
  количество итераций анимации: бесконечно;
  направление анимации: альтернативное;
}

Можно заменить на

  п {
  анимация: 3 секунды бесконечное чередование слайдов;
}

Примечание : Вы можете найти более подробную информацию на справочной странице анимации :

Установка нескольких значений свойств анимации

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

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

  имя-анимации: fadeInOut, moveLeft300px, bounce;
продолжительность анимации: 3 секунды;
количество итераций анимации: 1;

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

  имя-анимации: fadeInOut, moveLeft300px, bounce;
продолжительность анимации: 2,5 с, 5 с, 1 с;
количество итераций анимации: 2, 1, 5;

В этом третьем случае заданы три анимации, но только две длительности и количество итераций. В таких случаях, когда недостаточно значений для присвоения отдельного значения каждой анимации, значения циклически меняются от начала до конца.Так, например, fadeInOut получает длительность 2,5 секунды, а moveLeft300px — 5 секунд. Теперь мы подошли к концу доступных значений продолжительности, поэтому мы снова начинаем с самого начала — поэтому длительность отскока составляет 2,5 секунды. Счетчики итераций (и любые другие значения свойств, которые вы укажете) будут назначены таким же образом.

  имя-анимации: fadeInOut, moveLeft300px, bounce;
продолжительность анимации: 2,5 с, 5 с;
количество итераций анимации: 2, 1;

Использование событий анимации

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

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

Добавление CSS

Начнем с создания CSS для анимации.Эта анимация будет длиться 3 секунды, называться «скольжение», повторяться 3 раза и каждый раз менять направление. В @keyframes шириной и левым полем манипулируют, чтобы элемент скользил по экрану.

  .slidein {
  продолжительность анимации: 3 секунды;
  имя-анимации: слайдин;
  количество итераций анимации: 3;
  направление анимации: альтернативное;
}

@keyframes slidein {
  из {
    маржа слева: 100%;
    ширина: 300%
  }

  к {
    маржа слева: 0%;
    ширина: 100%;
  }
}

Добавление слушателей событий анимации

Мы будем использовать код JavaScript для прослушивания всех трех возможных событий анимации.Этот код настраивает наши прослушиватели событий; мы вызываем его при первой загрузке документа для настройки.

  var element = document.getElementById ("watchme");
element.addEventListener ("запуск анимации", слушатель, ложь);
element.addEventListener ("animationend", слушатель, ложь);
element.addEventListener ("анимация", слушатель, ложь);

element.className = "слайд";

Это довольно стандартный код; вы можете получить подробную информацию о том, как это работает, в документации для eventTarget.addEventListener () . Последнее, что делает этот код, — устанавливает класс для элемента, который мы будем анимировать, на «slidein»; мы делаем это, чтобы запустить анимацию.

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

Прием событий

События доставляются в функцию listener () , которая показана ниже.

  прослушиватель функции (событие) {
  var l = document.createElement ("ли");
  switch (event.type) {
    case "animationstart":
      l.textContent = `Начато: прошедшее время $ {event.elapsedTime}`;
      перерыв;
    case "animationend":
      l.textContent = `Завершено: прошедшее время $ {event.elapsedTime}`;
      перерыв;
    case "animationiteration":
      l.textContent = `Новый цикл начался в момент $ {event.elapsedTime}`;
      перерыв;
  }
  document.getElementById («вывод»). appendChild (l);
}

Этот код тоже очень простой.Он смотрит на event.type , чтобы определить, какое событие анимации произошло, а затем добавляет соответствующую заметку в

Результат, когда все сказано и сделано, выглядит примерно так:

Начато: истекшее время 0
Новый цикл начался в момент времени 3.012000083
Новый цикл начался в момент времени 6.00600004196167
Завершено: истекшее время 9.234000205993652

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

`HTML`

Для полноты картины, вот HTML-код, отображающий содержимое страницы, включая список, в который скрипт вставляет информацию о полученных событиях:

   Смотри, как я двигаюсь 

  В этом примере показано, как использовать анимацию CSS для создания  h2 
  элементы перемещаются по странице.

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

А вот и живой вывод.

Примечание : Обновите страницу, чтобы увидеть анимацию, или нажмите кнопку CodePen, чтобы просмотреть анимацию в среде CodePen.

`animation-direction - CSS: каскадные таблицы стилей`

Свойство CSS animation-direction устанавливает, должна ли анимация воспроизводиться вперед, назад или попеременно назад и вперед между воспроизведением последовательности вперед и назад.

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

Часто удобно использовать сокращенное свойство animation для одновременной установки всех свойств анимации.

 
направление анимации: нормальное;
направление анимации: обратное;
направление анимации: альтернативное;
направление анимации: альтернативно-обратное;


направление анимации: нормальное, обратное;
направление анимации: альтернативное, обратное, нормальное;


направление анимации: наследование;
анимация-направление: начальная;
направление анимации: не установлено;

`Значения`

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

Примечание : Когда вы указываете несколько значений, разделенных запятыми, в свойстве animation- * , они будут назначены анимациям, указанным в свойстве animation-name , по-разному в зависимости от их количества.Для получения дополнительной информации см. Установка нескольких значений свойств анимации.

`Анимация воспроизводится в обратном порядке`

`HTML`

`CSS`

  .box {
  цвет фона: rebeccapurple;
  радиус границы: 10 пикселей;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  имя-анимации: повернуть;
  продолжительность анимации: 0,7 с;
  направление анимации: обратное;
}

@keyframes rotate {
  0% {
    преобразовать: повернуть (0);
  }
  100% {
    преобразовать: повернуть (360 градусов);
  }
}

См. Примеры анимации CSS.

Таблицы BCD загружаются только в браузере

`animation-name - CSS: Cascading Style Sheets`

Свойство CSS animation-name определяет имена одного или нескольких @keyframes at-правил, описывающих анимацию или анимацию, применяемую к элементу.

Часто удобно использовать сокращенное свойство animation для одновременной установки всех свойств анимации.

 
имя-анимации: нет;
имя-анимации: test_05;
имя-анимации: -специфическая;
имя-анимации: вертикальное скольжение;


имя-анимации: test1, animation4;
имя-анимации: нет, зависит от -moz, скользит;


имя-анимации: начальное
имя-анимации: наследовать
имя-анимации: отключено

`Значения`

нет: Специальное ключевое слово, не обозначающее ключевые кадры.Его можно использовать для деактивации анимации без изменения порядка других идентификаторов или для деактивации анимации, исходящей из каскада.
<клиент-заказчик>: Имя, идентифицирующее анимацию. Этот идентификатор состоит из комбинации чувствительных к регистру букв a – z , чисел от 0 до 9 , подчеркивания ( _ ) и / или тире (–). Первым символом без тире должна быть буква.Также запрещены два дефиса в начале идентификатора. Кроме того, идентификатор не может быть нет , не установлен , начальный или наследует .

Примечание : Когда вы указываете несколько значений, разделенных запятыми, в свойстве animation- * , они будут назначены анимациям, указанным в свойстве animation-name , по-разному в зависимости от их количества. Для получения дополнительной информации см. Установка нескольких значений свойств анимации.

`Анимация имеет имя анимации поворота`

`HTML`

`CSS`

  .box {
  цвет фона: rebeccapurple;
  радиус границы: 10 пикселей;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  имя-анимации: повернуть;
  продолжительность анимации: 0,7 с;
}

@keyframes rotate {
  0% {
    преобразовать: повернуть (0);
  }
  100% {
    преобразовать: повернуть (360 градусов);
  }
}

См. Примеры анимации CSS.

Таблицы BCD загружаются только в браузер

`анимация | CSS-уловки`

Свойство animation в CSS можно использовать для анимации многих других свойств CSS, таких как color , background-color , height или width .Каждую анимацию необходимо определить с помощью at-правила @keyframes , которое затем вызывается с помощью свойства animation , например:

  .element {
  анимация: пульс 5с бесконечный;
}

@keyframes pulse {
  0% {
    цвет фона: # 001F3F;
  }
  100% {
    цвет фона: # FF4136;
  }
}

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

`Субобъекты`

имя-анимации : объявляет имя @keyframes at-правила, которым нужно управлять.
продолжительность анимации : время, необходимое для завершения одного цикла анимации.
Функция синхронизации анимации : устанавливает предустановленные кривые ускорения, такие как легкость или линейная .
animation-delay : время между загрузкой элемента и началом анимационной последовательности (классные примеры).
animation-direction : устанавливает направление анимации после цикла. Его значение по умолчанию сбрасывается в каждом цикле.
счетчик-итераций-анимации : количество раз, когда должна быть выполнена анимация.
animation-fill-mode : устанавливает, какие значения применяются до / после анимации. Например, вы можете установить последнее состояние анимации, чтобы оно оставалось на экране, или вы можете настроить его так, чтобы оно возвращалось к предыдущему состоянию, когда анимация началась.
состояние воспроизведения анимации : приостановить / воспроизвести анимацию.

Эти подсвойства можно использовать следующим образом:

  @keyframes stretch {
  / * здесь объявляем действия анимации * /
}

.element {
  имя-анимации: растянуть;
  продолжительность анимации: 1,5 с;
  анимация-функция-тайминг: замедление;
  задержка анимации: 0 с;
  направление анимации: альтернативное;
  количество итераций анимации: бесконечно;
  режим заливки анимации: нет;
  состояние воспроизведения анимации: работает;
}

/ *
  такой же как:
* /

.element {
  анимация:
    протяжение
    1,5 с
    облегчение
    0 с
    чередовать
    бесконечный
    никто
    Бег;
}

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

`функция синхронизации анимации`	легкость, легкость выхода, легкость входа, легкость входа, линейная, кубическая кривая Безье (x1, y1, x2, y2) (например, кубическая безье (0,5 , 0,2, 0,3, 1,0))
`продолжительность анимации`	Xs или Xms
`задержка анимации`	Xs или Xms
`количество итераций анимации`	X
`animation-fill-mode`	вперед, назад, оба, нет
`animation-direction`	normal, альтернативно
`animation-play-state`	paused, running , работает

`Несколько шагов`

Если анимация имеет одинаковые начальные и конечные свойства, полезно разделять запятыми значения 0% и 100% внутри @keyframes :

  @keyframes pulse {
  0%, 100% {
    цвет фона: желтый;
  }
  50% {
    цвет фона: красный;
  }
}

`Несколько анимаций`

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

  .element {
  анимация:
    импульс 3 с ослабление бесконечное чередование,
    nudge 5s линейный бесконечный альтернативный;
}

`Производительность`

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

transform: translate ()
transform: scale ()
transform: rotate ()
opacity

`Какие свойства можно анимировать?`

MDN имеет список свойств CSS, которые можно анимировать.Анимированные свойства имеют тенденцию к цвету и числам. Примером неанимируемого свойства является background-image .

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

`Desktop`

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

`Mobile / Mobile`

Android Chrome	Android Firefox	Android	iOS Safari
89	86	4 *	6.0-6,1 *

`Дополнительная информация`

`CSS Animation и свойство @Keyframes`

< html >

< head >

35 title >

Анимация CSS и свойство @Keyframes

title >

< style 9 9000 body {

background-color: #fff;

}

.батарея {

высота: 140 пикселей;

ширина: 321 пикселей;

граница: сплошная 5px # 000;

border-radius: 7px;

позиция: абсолютная;

маржа: авто;

осталось: 0;

правый: 0;

снизу: 0;

верх: 0;

}

.верх {

высота: 40 пикселей;

ширина: 25 пикселей;

цвет фона: # 000;

положение: относительное;

слева: 325 пикселей;

верх: 52 пикселя;

радиус границы: 0 3px 3px 0;

}

.charge1,

.charge2,

.charge3,

.charge4 {

ширина: 75 пикселей;

высота: 130 пикселей;

цвет фона: # 3BC700;

положение: относительное;

непрозрачность: 0;

}

.charge1 {

поле: 9px 2px 3px 6px;

снизу: 44 пикселя;

анимация: заряд-1 2с бесконечно;

}

.charge2 {

маржа: 9px 9px 3px 9px;

снизу: 183px;

слева: 75 пикселей;

анимация: заряд-2 2с бесконечно;

}

.charge3 {

поле: 9px 9px 3px 12px;

снизу: 322 пикселя;

слева: 150 пикселей;

анимация: заряд-3 2с бесконечно;

}

.charge4 {

маржа: 9px 2px 3px 15px;

снизу: 461px;

слева: 225 пикселей;

анимация: заряд-4 2с бесконечно;

}

@keyframes charge-1 {

25%,

10014 9

непрозрачность: 1;

}

@keyframes charge-2 {

36 % {

непрозрачность: 0;

}

50%,

100% {

непрозрачность: 1;

}

@keyframes charge-3 {

36 % {

непрозрачность: 0;

}

75%,

100% {

непрозрачность: 1;

}

@keyframes charge-4 {

36 0%,

36 % {

непрозрачность: 0;

}

100% {

непрозрачность: 1;

}

стиль >

головка >

корпус >

< div class = «аккумулятор» >

< div class = «верх» > div >

< div class = "charge1" > div >

< div class = "charge2" > div >

< div class = "charge3" > div >

< div class = "charge4" > div >

div >

корпус >

HTML >

.