Свойство animation

Описание

Используется для создания анимации.
Сокращенная запись для свойств animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode и animation-play-state.

Синтаксис

animation: animation-duration || animation-timing-function || animation-delay || animation-iteration-count || animation-direction || animation-fill-mode || animation-play-state || [none | animation-name ;

Пример

<!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: rotate-name 3s ease-in-out infinite; 
} 
@keyframes rotate-name{ 
0%{ 
transform: rotate(0deg); 
} 
100%{ 
transform: rotate(360deg); 
} 
} 
</style> 
<div id='anima'></div>
</body>
</html>

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

Свойство padding-bottom

Устанавливает расстояние от внутреннего нижнего края рамки элемента до воображаемого прямоугольника.

Применяется к дочернему элементу указанного типа

Псевдокласс :only-of-type применяется к дочернему элементу указанного типа, только если он являет...

Свойство flex

Сокращённое свойство, которое позволяет указать параметры элемента, чтобы он эффективно заполнял ...

Свойство background

Универсальное свойство позволяет установить одновременно несколько характеристик фона. Значения м...

Идентификатор

Идентификатор определяет уникальное имя элемента, которое используется для изменения его стиля и ...