CSS стиль animation
CSS стиль animation - универсальное свойство, которое задает сразу несколько параметров анимации.
Chrome, Safari и Android поддерживают свойство -webkit-animation.
Opera до версии 12.10 поддерживает свойство -o-animation.
Firefox до версии 16 поддерживает свойство -moz-animation.
Краткая информация по CSS-свойству animation
Правила написания свойства animation
animation: animation-name: знач-я ||
animation-duration: знач-я ||
animation-timing-function: знач-я ||
animation-delay: знач-я ||
animation-iteration-count: знач-я ||
animation-direction: знач-я ||
animation-fill-mode: знач-я ||
animation-play-state: знач-я
Здесь знач-я - любые комбинации значений, разделенные между собой пробелом, и определяющих параметры анимации.
Объектная модель
Объект.style.animation
Пример применения стиля animation
Проиллюстрируем работу animation на примере, нарисовав подмигивающего гуманоида:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример с animation</title>
<style>
.creature {
width: 200px;
height: 200px;
background: #3ac;
position: relative;
}
.creature::before, .creature::after {
content: '';
position: absolute;
width: 30px;
height: 40px;
border-radius: 50%;
background: #000;
top: 40px;
animation: eye 3s ease-in-out infinite;
-webkit-animation: eye 3s ease-in-out infinite;
}
.creature::before { left: 55px; }
.creature::after { right: 55px; }
@keyframes eye {
90% { transform: none; }
95% { transform: scaleY(0.1); }
}
@-webkit-keyframes eye {
90% { transform: none; }
95% { transform: scaleY(0.1); }
}
</style>
</head>
<body>
<div class="creature"></div>
</body>
</html>