animation
=========

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

Интерактивный пример
--------------------

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

|  |  |
| --- | --- |
| Начальное значение | как и у каждого из подсвойств этого свойства:* `animation-name`: `none`
* `animation-duration`: `0s`
* `animation-timing-function`: `ease`
* `animation-delay`: `0s`
* `animation-iteration-count`: `1`
* `animation-direction`: `normal`
* `animation-fill-mode`: `none`
* `animation-play-state`: `running`
* `animation-timeline` (en-US): `auto`
 |
| Применяется к | все элементы |
| Наследуется | нет |
| Обработка значения | как и у каждого из подсвойств этого свойства:* `animation-name`: как указано
* `animation-duration`: как указано
* `animation-timing-function`: как указано
* `animation-delay`: как указано
* `animation-direction`: как указано
* `animation-iteration-count`: как указано
* `animation-fill-mode`: как указано
* `animation-play-state`: как указано
* `animation-timeline` (en-US): a list, each item either a case-sensitive CSS identifier or the keywords `none`, `auto`
 |
| Animation type | Not animatable |

Синтаксис
---------


```css
/\* @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.

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

animation =   
  <single-animation># (en-US)    
  
<single-animation> =   
  <time [0s,∞]>                       || (en-US)  
  <easing-function>                   || (en-US)  
  <time>                              || (en-US)  
  <single-animation-iteration-count>  || (en-US)  
  <single-animation-direction>        || (en-US)  
  <single-animation-fill-mode>        || (en-US)  
  <single-animation-play-state>       || (en-US)  
  [ (en-US) none | (en-US) <keyframes-name> ] (en-US)           
  
<easing-function> =   
  linear                          | (en-US)  
  <linear-easing-function>        | (en-US)  
  <cubic-bezier-easing-function>  | (en-US)  
  <step-easing-function>            
  
<single-animation-iteration-count> =   
  infinite        | (en-US)  
  <number [0,∞]>    
  
<single-animation-direction> =   
  normal             | (en-US)  
  reverse            | (en-US)  
  alternate          | (en-US)  
  alternate-reverse    
  
<single-animation-fill-mode> =   
  none       | (en-US)  
  forwards   | (en-US)  
  backwards  | (en-US)  
  both         
  
<single-animation-play-state> =   
  running  | (en-US)  
  paused     
  
<keyframes-name> =   
  <custom-ident>  | (en-US)  
  <string> (en-US)          
  
<linear-easing-function> =   
  linear( <linear-stop-list> )    
  
<cubic-bezier-easing-function> =   
  ease                                                | (en-US)  
  ease-in                                             | (en-US)  
  ease-out                                            | (en-US)  
  ease-in-out                                         | (en-US)  
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )    
  
<step-easing-function> =   
  step-start                             | (en-US)  
  step-end                               | (en-US)  
  steps( <integer> , <step-position>? (en-US) )    
  
<linear-stop-list> =   
  [ (en-US) <linear-stop> ] (en-US)# (en-US)    
  
<step-position> =   
  jump-start  | (en-US)  
  jump-end    | (en-US)  
  jump-none   | (en-US)  
  jump-both   | (en-US)  
  start       | (en-US)  
  end           
  
<linear-stop> =   
  <number>               && (en-US)  
  <linear-stop-length>? (en-US)    
  
<linear-stop-length> =   
  <percentage>{1,2} (en-US)    
  
```

Примеры
-------

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

### Cylon Eye

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


```html
<div class="view\_port">
  <div class="polling\_message">Listening for dispatches</div>
  <div class="cylon\_eye"></div>
</div>
```



```css
.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%;
  }
}
```

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

| Specification |
| --- |
| CSS Animations Level 1 # animation |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Использование CSS-анимации
* JavaScript `AnimationEvent` API