Содержание

Свойство animation | CSS справочник

CSS свойства

Определение и применение

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

  • animation-name («keyframename /-s | none | initial | inherit»)
  • animation-duration («time | initial | inherit»)
  • animation-timing-function («linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int, start | end) | cubic-bezier(n,n,n,n) | initial | inherit»)
  • animation-delay («time | initial | inherit»)
  • animation-iteration-count («number | infinite | initial | inherit»)
  • animation-direction («normal | reverse | alternate | alternate-reverse | initial | inherit»)
  • animation-fill-mode («none | forwards | backwards | both | initial | inherit»)
  • animation-play-state («paused | running | initial | inherit»)

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

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

Не забывайте в обязательном порядке указывать значение продолжительности анимации (animation-duration), иначе, анимация не будет проиграна, т.к. значение по умолчанию у этого свойства равно нулю.

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

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

Свойство
Chrome
Firefox
Opera
Safari
IExplorer
Edge
animation43.0
4.0
-webkit-		16.0
5.0
-moz-		30.0
15.0
-webkit-		9.0
4.0
-webkit-		10.012.0

CSS синтаксис:

animation:"name duration timing-function delay iteration-count direction fill-mode play-state"; /* имя анимации может быть указано в конце списка */

JavaScript синтаксис:

object. style.animation = "myAnimation 1s linear"

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

ЗначениеОписание
animation-nameУказывает имя анимации/список анимаций, которые должны быть применены к выбранному элементу. Каждое имя указывает на правило (@keyframes), которое определяет значения свойств анимации.
Значение по умолчанию none.
animation-durationОпределяет, сколько секунд или миллисекунд затрачивается на выполнение одного цикла анимации. Значение по умолчанию 0.
animation-timing-functionОпределяет кривую скорости для анимации (используется математическая функция — кубическая кривая Безье). Кривая скорости определяет время анимации, используемое, чтобы изменить один набор стилей CSS на другой. Значение по умолчанию ease.
animation-delayОпределяет задержку для запуска анимации. Значение по умолчанию 0.
animation-iteration-countУказывает, сколько раз анимация должна быть воспроизведена. Значение по умолчанию 1.
animation-directionОпределяет будет ли анимация воспроизводиться в обратном направлении, или в виде чередующихся циклов. Значение по умолчанию normal.
animation-fill-modeЗадает стиль для элемента, когда анимация не воспроизводится (когда она будет закончена, или когда она имеет задержку, установленную свойством animation-delay ).
Значение по умолчанию none.
animation-play-stateОпределяет состояние анимации (анимация воспроизводится, либо приостановлена). Значение по умолчанию running.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

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

<!DOCTYPE html>
<html>
<head>
	<title>Пример анимации на CSS</title>
<style> 
.test {
width: 100px; /* устанавливаем ширину блока */
height: 100px;  /* устанавливаем высоту блока */
position: relative;  /* элемент с относительным позиционированием */
animation: iliketomoveit 4s steps(3,start) 500ms infinite reverse; /* "name (имя анимации-как в @keyframes) duration(длительность) timing-function (кривая скорости - шаговая анимация) delay (задержка 500 миллисекунд) iteration-count (количество повторов анимации - бесконечно) direction (направление анимации - reverse(в обратном направлении) )" */ 
} 

 
@keyframes iliketomoveit {
	0%   {left: 0px;} /* задаем положение элемента при начале анимации */ 
	50% {left: 500px; border-radius: 50px; background: plum; } /* задаем смещение элемента относительно левого края, изменяем цвет заднего фона и определяем форму границ (скругление) */ 
	100% {left: 0px;background: green; } /* задаем первоначальное положение и задаем цвет заднего фона по завершению анимации */ 
} 
</style>
</head>
	<body>
		<div class = "test">none</div>
	</body>
</html>
Пример использования CSS свойства animation (анимация на CSS).
CSS свойства

CSS-анимация | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

?

CSS-анимация

— ВД

  • Глобальное использование
    98% + 0,01% «=» 98,01%

Сложный метод анимации некоторых свойств элемента

Chrome
  1. 4 — 42: Поддерживается
  2. 43 — 110: Поддерживается
  3. 111: Поддерживается
  4. 112 — 114: Поддерживается
EDGE
  1. 12 — 110: Поддерживается
  2. 111: поддержан
  • 00% — Supported»> 111: поддержан
    • 9192
      49192
        4919191141111.1111.911.
      • 4 — 5: Частичная поддержка
      • 5.1 — 8: Поддерживается
      • 9 — 16,3: Поддерживается
      • 16,4: Поддерживается
      • 16,5 — TP: поддерживается
        1. 2- 4: 40015
          2. . 15: поддерживается
        2. 16 — 110: Поддерживается
        3. 01% — Supported»> 111: Поддерживается
        4. 112 — 113: Поддерживается
        Opera
        1. 9 — 11,6: не поддерживается
        2. 12: Поддержка
        3. 12.1: 10015
        6. 7.
        12. 00% — Supported, requires this prefix to work: -o-«>
        14. 7.
        16. 7.
        18. 12: 70015
        20. 12: 70015
        22. .
        23. 30 — 94: Поддерживается
        24. 95: Поддерживается
        IE
        1. 13% — Not supported»> 5,5 — 9: не поддерживается
        2. 10: Поддерживается
        3. 11: Поддержка
        Chrome для иид.0015
        Safari on iOS
        1. 3.2 — 5.1: Partial support
        2. 6 — 8.4: Supported
        3. 9 — 16.3: Supported
        4. 16.4: Supported
        5. 16.5: Supported
        Samsung Internet
        1. 4 — 19.0 : Поддерживается
        2. 20: Поддерживается
        Opera Mini
        1. Все: не поддерживается
        Opera Mobile
        1. 00% — Not supported»> 10 — 12: не поддерживается
        2. 12.1: Поддержка
        3. 73 73: Поддержка
        4. 12.1: Поддержка
        5. 73: Поддержка0015
        UC Browser for Android
        1. 13.4: Supported
        Android Browser
        1. 2.1 — 3: Partial support
        2. 4 — 4.4.4: Supported
        3. 111: Supported
        Firefox for Android
        1. 110: поддержан
        QQ Browser
        1. 13.1: Поддержано
        Baidu Browser
        1. 00% — Supported»> 13.18: Поддерживается
        Kaios Browser
          176.566.56.56.5: 5: 5: 5: 5: 5: 5: 5: 5: 5,
          .0015
        • 3: Поддерживается
          • Ресурсы:
          Сообщение в блоге об использовании
          Документы WebPlatform

          анимация | CSS-трюки — CSS-трюки

          DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

          Свойство animation в CSS можно использовать для анимации многих других свойств CSS, таких как

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

           .element {
  анимация: импульс 5с бесконечный;
}
пульс @keyframes {
  0% {
    цвет фона: #001F3F;
  }
  100% {
    цвет фона: #FF4136;
  }
}

          Каждое @keyframes at-правило определяет, что должно происходить в определенные моменты во время анимации.

          Например, 0% — это начало анимации, а 100% — конец. Затем этими ключевыми кадрами можно управлять с помощью сокращения animation или его восемь подсвойств, чтобы дать больше контроля над тем, как следует манипулировать этими ключевыми кадрами.

          Подсвойства

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

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

           @keyframes stretch {
  /* объявляем здесь действия анимации */
}
.элемент {
  имя-анимации: растяжка;
  продолжительность анимации: 1,5 с;
  функция синхронизации анимации: облегчение;
  анимация-задержка: 0 с;
  направление анимации: альтернативное;
  количество итераций анимации: бесконечно;
  режим заполнения анимации: нет;
  состояние воспроизведения анимации: работает;
}
/*
  такой же как:
*/
.элемент {
  анимация:
    потягиваться
    1,5 с
    облегчение
    0 с
    чередовать
    бесконечный
    никто
    бег;
}

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

          функция синхронизации анимации кубический Безье (x1, y1, x2, y2) (например, кубический Безье (0,5, 0,2, 0,3, 1,0))
          анимация-длительность Xs или Xms
          9 анимация Xs или Xms
          число итераций анимации X
          animation-fill-mode forwards, backwards, both, none
          animation-direction normal, alternate
          animation-play-state
          		пауза, работает, работает

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

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

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

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

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

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

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

          Анимация большинства свойств связана с производительностью, поэтому следует проявлять осторожность перед анимацией любого свойства. However, there are certain combinations that can be animated safely:

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

          Which properties можно анимировать?

          В MDN есть список свойств CSS, которые можно анимировать. Анимационные свойства имеют тенденцию к цветам и числам. Пример неанимируемого свойства: 9.0194 фоновое изображение .

          Browser support

          Desktop
          Chrome Firefox IE Edge Safari
          4* 5* 10 12 5. 1*

          Мобильный телефон/планшет
          Android Chrome Android Firefox Android iOS Safari
          111 110 4* 6.0-6.1*

          More information

          • Using CSS animations (MDN)
          • CSS Animations Level 1 (W3C specification)
          • CSS Animation Shorthand Property (DigitalOcean)
          • Веб-анимация в действии (A List Apart)
          • Пять способов ответственной анимации (24 способа)

          Сравнение анимационных технологий

          анимация

          Анимированное подчеркивание только с помощью CSS

          анимация

          Удобная маленькая система для анимированных входов в CSS

          анимация

          Новый способ задержки анимации ключевых кадров

          анимация

          Продвинутая анимация CSS с использованием кубического безье()

          анимация

          Сказка об анимационном перформансе

          анимация

          Доступная веб-анимация: объяснение WCAG по анимации

          анимация

          Аддитивные анимации в CSS

          анимация

          Анимация во встроенном стиле

          анимация

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

          анимация

          Анимированные нокаут-письма

          анимация

          Анимированные матрешки в CSS

          анимация

          Анимированное положение кольца фокусировки

          анимация

          Анимированные радиальные индикаторы выполнения SVG

          анимация

          Анимированные SVG

          анимация

          Анимация границы

          анимация

          Анимация ширины и высоты CSS без эффекта сжатия

          анимация

          Анимация счетчиков чисел

          анимация

          Анимация SVG с помощью CSS

          анимация

          Анимация границы градиента CSS

          анимация

          Анимация свойства `content`

          анимация

          Методы анимации для добавления и удаления элементов из стека

          анимация

          Анимация того, как работают треугольники CSS

          анимация

          Ключевые кадры анимации WebKit, разделенные запятыми

          анимация

          Управление CSS-анимацией и переходами с помощью JavaScript

          анимация

          Создание анимированного индикатора меню с помощью селекторов CSS

          анимация

          Библиотеки анимации CSS

          анимация

          Хитрости CSS-анимации: переходы между состояниями, отрицательные задержки, анимация начала и многое другое

          анимация

          CSS-анимация и переходы в электронной почте

          анимация