CSS-анимации
Чтобы перемещать элемент или менять его стиль со временем, JavaScript не нужен: CSS сам умеет анимировать HTML-элементы.
Что такое CSS-анимации?
С помощью анимации элемент постепенно переходит от одного стиля к другому, причём ни количество задействованных свойств CSS, ни количество изменений не ограничено.
Сначала идут ключевые кадры: они описывают стили, которые элемент должен иметь в определённые моменты, и CSS-анимация не может запуститься, пока их нет.
CSS animation-name и animation-duration
Чтобы запустить анимацию, нужны два свойства. animation-name задаёт ей имя, а animation-duration указывает, сколько длится один прогон. Если не указать длительность, ничего анимироваться не будет, поскольку её значение по умолчанию — 0s (0 секунд).
Правило CSS @keyframes
Стили внутри правила @keyframes отмечают моменты, через которые проходит анимация, а элемент постепенно переходит от текущего стиля к каждому новому.
Всё это не даёт никакого эффекта, пока анимация не привязана к элементу.
Пример
Здесь элемент <div> привязан к «myAnimation». За 4 секунды цвет его фона плавно переходит от красного к жёлтому. Ключевые слова from и to означают 0% и 100%.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keyframes From To</title>
<style>
@keyframes myAnimation {
from {background-color: red;}
to {background-color: yellow;}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
}
</style>
</head>
<body>
<h1>CSS Animation: from/to</h1>
<div></div>
</body>
</html>
Ключевые кадры в процентах
Проценты могут заменить from и to и позволяют задать сколько угодно изменений стиля. В этом случае цвет фона меняется на 0%, 25%, 50% и 100%.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keyframes Percent</title>
<style>
@keyframes myAnimation {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
}
</style>
</head>
<body>
<h1>CSS Animation: Percentages</h1>
<div></div>
</body>
</html>
Цвет и позиция
Здесь ключевые кадры на 0%, 25%, 50%, 75% и 100% задают и цвет фона, и позицию, поэтому элемент <div> движется по квадратной траектории, пока его цвет меняется.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keyframes Position</title>
<style>
@keyframes myAnimation {
0% {background-color: red; left: 0px; top: 0px;}
25% {background-color: yellow; left: 200px; top: 0px;}
50% {background-color: blue; left: 200px; top: 200px;}
75% {background-color: green; left: 0px; top: 200px;}
100% {background-color: red; left: 0px; top: 0px;}
}
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
}
</style>
</head>
<body>
<h1>CSS Animation: Position and Color</h1>
<div></div>
</body>
</html>