CSS :: Правило @keyframes

css-правило @keyframes (от англ. keyframes – ключевые кадры) устанавливает ключевые кадры при анимации элемента, которые определяют поведение одного цикла анимации и представляют собой конкретные стилевые свойства элемента в ключевых точках анимации.

Синтаксис

@keyframes <имя анимации> { [ from | to | <проценты> ]# }

Значения

имя анимации – имя анимации, для которой устанавливаются ключевые кадры (задается при помощи свойства animation-name).
проценты – проценты рассчитываются относительно промежутка времени всей анимации.
from – задает первый ключевой кадр (аналог значения 0%).
to – задает последний ключевой кадр (аналог значения 100%).

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-animations/#keyframes

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/@keyframes

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>
	
	<style>
	
		p{
		padding: 0px;
		width: 460px;
		height: 110px;
		border: solid 4px red;
		animation-name: example_1, example_2;
		animation-duration: 3s;
		animation-timing-function: ease-in-out;
		animation-delay: 700ms;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		animation-fill-mode: backwards;
		}
		
		@keyframes example_1{
			0% {
			background: #ff0000;
			height: 0px;
			}
			
			50% {
			background: #00ff00;
			height: 400px;
			}
			
			100% {
			background: #0000ff;
			height: 200px;
			}
		}
		
		@keyframes example_2{
			from {
			width: 0px;
			}
			
			to {
			width: 500px;
			}
		}
		
	</style>
	
</head>
<body>
	<p>	</p>
</body>
</html>

Пример №1