Свойство animation
Свойство animation — сокращенный способ задать свойства анимации animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, позволяет одновременно задать имя анимации, время анимации, способ определения промежуточных значений изменяющихся параметров, задержку анимации, количество циклов анимации и возможность ее проигрывания в обратную сторону.
Допустимые значения
- допустимые значения смотрите в свойствах animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction
| Значение по умолчанию | не определяется для составных свойств |
|---|---|
| Применимо | к блочным и строчным элементам |
| Наследование | нет |
| Версия CSS | CSS 3 |
| Поддерживается браузерами |
|
Пример
div {
width:100px;
height:50px;
position:absolute;
top:5px;
animation:'slide' 10s easy-in 3s 2 alternate;
}
И еще один пример:
Этот блок поедет по горизонтали слева направо в течение 20с и почернеет, причем за первые 10с он проедет всего 10% (20px) расстояния и побелеет, а еще за 6с он доедет до позиции left:100px; и покраснеет. По вертикали блок будет равномерно ехать снизу верх в течение первых 10с (эта анимация поставлена на паузу).
div {
background:#0f0;
color:#f00;
position:absolute;
width:20px;
top:90px;
animation:'slide' 20s, 'slide1' 10s;
animation-play-state: running, paused;
}
@keyframes 'slide'{
from{
left:8px;
animation-timing-function:ease-in;
}
50%{
left:20px;
background:#fff;
animation-timing-function:ease-out, ease-in;
}
80%{
left:100px;
background:#f00;
}
to{
left:200px;
background:#000;
}
}
@keyframes 'slide1'{
from{
top:90px;
}
to{
top:0;
}
}
Заметки
Это свойство относится к модулю CSS Animations Module Level 3 находящемся в разработке W3C, поэтому в нем возможны дополнения.
Safari 4.0 и выше Chrome 3.0 и выше поддерживают аналогичное свойство -webkit-animation, а также поддерживают возможность определить список анимаций с помощью ключевого слова @-webkit-keyframes