Правило @-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.
Замечание! Анимация происходит не в три рывка, а плавно.

По теме

• Вендорные префиксы. Что это?
• Правило @keyframes
• Анимация в CSS3. Часть I
• Анимация в CSS3. Часть II
• Свойство animation
• Свойство animation-delay
• Свойство animation-direction
• Свойство animation-duration
• Свойство animation-iteration-count
• Свойство animation-play-state
• Свойство animation-timing-function