CSS :: Свойство animation-name

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

Характеристики

Значение по умолчанию: none.
Применяется: ко всем элементам, а также к псевдоэлементам ::before и ::after.
Наследуется: нет.
Анимируется: нет.
JavaScript: object.style.animationName="value".

Синтаксис

animation-name: none | <имя анимации>[, none | <имя анимации>]*

Значения

В качестве значений принимает либо список имен анимаций, которые должны быть применены к элементу, либо ключевое слово none, которое используется по умолчанию и отменяет анимацию. Имена в списке анимаций должны перечисляться через запятую.

Ссылки

Официальный сайт W3C: https://www.w3.org/TR/css-animations-1/#animation-name

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/animation-name

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		div{
		margin-top: 3em;
		overflow: hidden;
		white-space: nowrap;
		padding: 1em;
		width: 460px;
		height: 110px;
		border: solid 4px red;
		}
				
		/* Задаем свойства анимации */ 
		.anim{
		animation-name: example_1, example_2;
		animation-duration: 2s;
		animation-timing-function: ease-in-out;
		animation-delay: 1.3s;
		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>

	<div class="anim">animation-name: example_1, example_2</div>
	
</body>	
</html>

Пример №1