AJAX загрузка
home

Свойство @keyframes

Пример


@keyframes anim {
from {margin-left:3px;}
to {margin-left:500px;}
}

#wrap1 {
animation:anim 4s 3;
}


Быстрый просмотр

Описание

Обратите внимание: данное свойство поддерживается в браузерах IE10+, Firefox и Opera. Для браузеров Chrome и Safari требуется префикс -webkit.

С помощью свойства @keyframes Вы можете создать анимацию.

Оформление элемента во время выполнения анимации может устанавливаться с помощью ключевых слов from (оформление элемента в начале анимации) и to (оформление элемента в конце анимации).

Более точно оформление можно задать с помощью % (0% - оформление элемента в начале анимации, 100% - оформление в конце анимации).

При определении анимации сразу после свойства @keyframes должно следовать имя данной анимации (данное имя затем должно быть указано в свойстве animation элемента, который будет анимирован).