Статья нуждается в доработке и будет доработана через некоторое время, см. пока видео ниже, там все есть.

Команда @keyframes задает ключевые кадры анимации.

См. все свойства для CSS анимации animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, animation.

См. также transition - плавные переходы (анимация по наведению на элемент).

Синтаксис

селектор {
	@keyframes имя_анимации{ключевые кадры};
}

Примеры

Пример

Задаем ключевые кадры:

@-o-keyframes anim {
	from {
		margin-left: 0px;
	}
	to {
		margin-left: 400px;
	}
}
@-ms-keyframes anim {
	from {
		margin-left: 0px;
	}
	to {
		margin-left: 400px;
	}
}
@-moz-keyframes anim {
	from {
		margin-left: 0px;
	}
	to {
		margin-left: 400px;
	}
}
@-webkit-keyframes anim {
	from {
		margin-left: 0px;
	}
	to {
		margin-left: 400px;
	}
}
@keyframes anim {
	from {
		margin-left: 0px;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	-o-animation: anim 3s infinite;
	-ms-animation: anim 3s infinite;
	-moz-animation: anim 3s infinite;
	-webkit-animation: anim 3s infinite;
	animation: anim 3s infinite;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Результат выполнения кода:

Результат выполнения кода: