animation

Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского

CSS свойство animation это короткая запись для animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode и animation-play-state.

Описание того, какие свойства являются анимируемые доступно; стоит отметить, что это описание также подходит для CSS переходов.

Начальное значениекак и у каждого из подсвойств этого свойства:
Применяется квсе элементы, ::before и ::after псевдоэлементы
Наследуетсянет
Обработка значениякак и у каждого из подсвойств этого свойства:
Animation typediscrete

Синтаксис

/* @keyframes duration | timing-function | delay | 
   iteration-count | direction | fill-mode | play-state | name */
  animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes duration | timing-function | delay | name */
  animation: 3s linear 1s slidein;

/* @keyframes duration | name */
  animation: 3s slidein;

Порядок важен в каждом определении анимации: первое значение, которое может быть проанализировано как <time> присваивается animation-duration, и второй назначен animation-delay.

Note that order is also important within each animation definition for distinguishing animation-name values from other keywords. When parsing, keywords that are valid for properties other than animation-name whose values were not found earlier in the shorthand must be accepted for those properties rather than for animation-name. Furthermore, when serializing, default values of other properties must be output in at least the cases necessary to distinguish an animation-name that could be a value of another property, and may be output in additional cases.

Формальный синтаксис

<single-animation>#

где
<single-animation> = <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]

где
<timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>
<single-animation-iteration-count> = infinite | <number>
<single-animation-direction> = normal | reverse | alternate | alternate-reverse
<single-animation-fill-mode> = none | forwards | backwards | both
<single-animation-play-state> = running | paused
<keyframes-name> = <custom-ident> | <string>

где
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/ru/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>, <number <a href="/ru/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)

где
<step-position> = jump-start | jump-end | jump-none | jump-both | start | end

Примеры

Посмотрите примеры CSS анимаций.

Cylon Eye

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

<div class="view_port">
  <div class="polling_message">
    Listening for dispatches
  </div>
  <div class="cylon_eye"></div>
</div>
.polling_message {
  color: white;
  float: left;
  margin-right: 2%;            
}

.view_port {
  background-color: black;
  height: 25px;
  width: 100%;
  overflow: hidden;
}

.cylon_eye {
  background-color: red;
  background-image: -webkit-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  background-image:    -moz-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  background-image:      -o-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  background-image:         linear-gradient(to right, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  color: white;
  height: 100%;
  width: 20%;

  -webkit-animation: 4s linear 0s infinite alternate move_eye;
     -moz-animation: 4s linear 0s infinite alternate move_eye;
       -o-animation: 4s linear 0s infinite alternate move_eye;
          animation: 4s linear 0s infinite alternate move_eye;
}

@-webkit-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
   @-moz-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
     @-o-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
        @keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }

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

Спецификация Статус Комментарий
CSS Animations
Определение 'animation' в этой спецификации.
Рабочий черновик Изначальное определение

Совместимость с браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
animationChrome Полная поддержка 43
Полная поддержка 43
Полная поддержка 3
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 12
Полная поддержка 12
Полная поддержка 12
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Полная поддержка 16
Полная поддержка 16
Полная поддержка 49
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 44
С префиксом Отключено
С префиксом Требует вендорный префикс: -webkit-
Отключено From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Полная поддержка 5
С префиксом
С префиксом Требует вендорный префикс: -moz-
IE Полная поддержка 10Opera Полная поддержка 30
Полная поддержка 30
Полная поддержка 15
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Нет поддержки 12.1 — 15
Нет поддержки 12 — 15
С префиксом
С префиксом Требует вендорный префикс: -o-
Safari Полная поддержка 9
Полная поддержка 9
Полная поддержка 4
С префиксом
С префиксом Требует вендорный префикс: -webkit-
WebView Android Полная поддержка 43
Полная поддержка 43
Полная поддержка 2
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания The animation-fill-mode property is not supported in Android browsers below 2.3.
Chrome Android Полная поддержка 43
Полная поддержка 43
Полная поддержка 18
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Android Полная поддержка 16
Полная поддержка 16
Полная поддержка 49
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 44
С префиксом Отключено
С префиксом Требует вендорный префикс: -webkit-
Отключено From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Полная поддержка 5
С префиксом
С префиксом Требует вендорный префикс: -moz-
Opera Android Полная поддержка 30
Полная поддержка 30
Полная поддержка 14
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Нет поддержки 12.1 — 14
Нет поддержки 12 — 14
С префиксом
С префиксом Требует вендорный префикс: -o-
Safari iOS Полная поддержка 9
Полная поддержка 9
Полная поддержка 3.2
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Samsung Internet Android Полная поддержка 4.0
Полная поддержка 4.0
Полная поддержка 1.0
С префиксом
С префиксом Требует вендорный префикс: -webkit-

Легенда

Полная поддержка  
Полная поддержка
Смотрите замечания реализации.
Смотрите замечания реализации.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

Смотрите также