Свойство animation-name

Описание

Указывает имя запускаемой аниимации.

Синтаксис

animation-name: none | идентификатор;
Значение Описание
none Отключает анимацию.
<идентификатор> Идентификатор должен начинаться с латинской буквы или подчёркивания ( _ ), разрешается содержание цифр от 0 до 9 и дефис ( - ). Запрещено использовать зарезервированные ключевые слова none, unset, inherit, initial.

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
 #anima{ 
width: 105px; 
height: 105px;
 border-radius: 5px; 
background-color: lightgreen; 
border: 3px dotted black; 
animation: 3s ease-in-out; 
animation-delay: 1s;
 animation-iteration-count: infinite; 
animation-name: rotate-name; }
 @keyframes rotate-name{ 
0%{ 
transform: rotate(0deg); 
}
 100%{ 
transform: rotate(3240deg); 
} 
} 
</style> 
<div id='anima'></div>
</body>
</html>

Читайте также

Свойство border-top-style

Устанавливает стиль верхней границы элемента.

Свойство text-transform

Управляет преобразованием текста элемента в заглавные или прописные символы. Когда значение отлич...

Свойство grid-gap

Определяет отступ между строками и столбцами grid сетки. <br>Сокращение для grid-row-gap и ...

Свойство backface-visibility

Определяет, показывать обратную сторону элемента или нет. Как правило, обратная сторона становитс...

Свойство z-index

Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном...