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

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

Experimental

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

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

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

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

Чтобы создать 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- укажат первую версию, которая работала с префиксом.

Что такое анимация 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;
}

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

Пример

div {
   
width: 100px;
    height: 100px;
   
position: relative;
    background-color: red;
   
animation-name: example;
   
animation-duration: 4s;
    animation-iteration-count: 2;
    animation-direction:
alternate-reverse;
}

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

Свойство 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:

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

CSS код:

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

.animation__circle{

width: 100px;
height: 100px;
border-radius: 50%;
background-color: #5e5373;
position: relative;
animation-name: circle;
animation-duration: 1s;
animation-timing-function: cubic-bezier(0.68,-0.55,0.265,1.55);

}

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

@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

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

Версии 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;
}

Совет 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
• название анимации
• продолжительность анимации
• задержка анимации
• количество итераций анимации
• направление анимации
• функция синхронизации анимации
• режим заливки анимации
• анимация

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

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

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

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

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

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

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

Правило @keyframes

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  прослушиватель функции (событие) {
  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);
}