Главная/ Cправочник HTML, CSS, Javascript/ CSS справочник/ Правило @keyframes | назначение, допустимые значения, примеры

Правило @keyframes

Последнее обновление: 25.01.2011

Правило @keyframes — позволяет пользователю описать анимацию CSS свойств в виде перечня ключевых кадров.

Синтаксис

@keyframes <имя анимации> {
    <селектор кадра 1> {
	<свойство 1>:<значение 1>;
	<свойство 2>:<значение 1>;
    }
    <селектор кадра 2> {
	<свойство 1>:<значение 2>;
	<свойство 2>:<значение 2>;
    }
    .....................
    <селектор кадра n> {
	<свойство 1>:<значение n>;
	<свойство 2>:<значение n>;
    }	
}
  • — задает имя анимации в виде строки в одинарных кавычках (это имя потом используется при вызове анимации в качестве значения свойства animation-name)
  • — задает селекторы которые определяют ключевые кадры. Они могут принимать значения:
    • from — внутри этого селектора описывается значения анимированных свойств в начальный момент анимации (также можно описать начальный кадр анимации, используя эквивалентный селектор 0%)
    • to — внутри этого селектора описывается значения анимированных свойств в конечный момент анимации (также можно описать конечный кадр анимации, используя эквивалентный селектор 100%)
    • — описывает значения анимированных свойств в данный момент времени (момент времени отсчитывается в процентном отношении от значения свойства animation-duration)
  • — анимируемое CSS свойство
  • — значения анимированного свойств в момент, описываемый селектором кадра

Пример кода

div {
	top:50px;
	left:0px;
	animation-name:'movement';
	animation-duration:10s;
}
@keyframes 'movement' {
    from {
	top:50px;
	left:0px;
    }
    50% {
	top:150px;
	left:100px;
    }
    to {
	top:400px;
	left:300px;
    }	
}

В примере описана анимация перемещения (изменение координат блока с течением времени). В первый момент анимации, описываемый селектором кадра from, координаты блока top:50px, left:0px. Следующий ключевой кадр описывает значения свойств через 50% времени анимации (в данном примере — 5 секунд). Координаты блока станут top:150px, left:100px. В последний момент времени описываемый селектором кадра to (через 10с) блок получит абсолютные координаты top:400px, left:300px.
Замечание! Анимация происходит не в три рывка, а плавно.

Поддерживается браузерами На данный момент не поддерживается ни одним из браузеров

Заметки

Safari 4.0 и выше Chrome 3.0 и выше поддерживают возможность определить список анимаций с помощью ключевого слова @-webkit-keyframes.

По теме

Теги: ,
Показать комментарии