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

Правило @-webkit-keyframes

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

Синтаксис

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

Пример кода

div {
	top:50px;
	left:0px;
	-webkit-animation-name:'movement';
	-webkit-animation-duration:10s;
}
@-webkit-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 и выше

По теме

Показать комментарии