Свойства анимации CSS
Здесь рассматриваются три темы: направление CSS-анимации, режим заполнения и сокращённое свойство.
Свойство CSS animation-direction
Анимация может проигрываться вперёд, назад или в чередующихся циклах, и выбор между ними определяет animation-direction.
Возможные значения:
normal- Значение по умолчанию: анимация проигрывается вперёд.reverse- Анимация проигрывается назад.alternate- Сначала идёт проигрывание вперёд, а за ним назад.alternate-reverse- Сначала идёт проигрывание назад, а за ним вперёд.
Обратное направление
Здесь значение reverse заставляет анимацию проигрываться назад.
Prompt
Создайте CSS-анимацию, которая перемещает красный блок div размером 100x100px слева направо с помощью @keyframes, с animation-direction равным reverse, чтобы анимация проигрывалась в обратном направлении.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Direction Reverse</title>
<style>
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
animation-direction: reverse;
}
@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;}
}
</style>
</head>
<body>
<h1>animation-direction: reverse</h1>
<p>The animation plays in reverse direction (backwards):</p>
<div></div>
</body>
</html>
Чередующееся направление
Благодаря значению alternate эта анимация при первом проигрывании идёт вперёд, а при следующем назад.
Prompt
Создайте CSS-анимацию, которая перемещает красный блок div размером 100x100px слева направо с помощью @keyframes, с animation-iteration-count равным 2 и animation-direction равным alternate, чтобы анимация проигрывалась сначала вперёд, затем назад.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Direction Alternate</title>
<style>
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate;
}
@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;}
}
</style>
</head>
<body>
<h1>animation-direction: alternate</h1>
<p>The animation plays forwards first, then backwards:</p>
<div></div>
</body>
</html>
Чередующееся-обратное направление
Благодаря значению alternate-reverse порядок меняется: при первом проигрывании назад, а при следующем вперёд.
Prompt
Создайте CSS-анимацию, которая перемещает красный div размером 100x100px слева направо с помощью @keyframes, с animation-iteration-count равным 2 и animation-direction равным alternate-reverse, чтобы она сначала воспроизводилась в обратном направлении, а затем вперёд.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Direction Alternate-Reverse</title>
<style>
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate-reverse;
}
@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;}
}
</style>
</head>
<body>
<h1>animation-direction: alternate-reverse</h1>
<p>The animation plays backwards first, then forwards:</p>
<div></div>
</body>
</html>
Свойство CSS animation-fill-mode
До проигрывания первого кейфрейма и после завершения последнего анимация никак не влияет на свой элемент. Именно это поведение можно изменить с помощью animation-fill-mode.
Свойство определяет, какой стиль имеет элемент, когда анимация не воспроизводится: до её начала, после окончания или в обоих случаях.
Доступные значения:
none- Стили не сохраняются ни до, ни после анимации; это значение по умолчанию.forwards- Стили последнего кейфрейма остаются на элементе (какой кейфрейм будет последним, зависит отanimation-directionиanimation-iteration-count).backwards- К элементу применяются стили первого кейфрейма (какой кейфрейм будет первым, зависит отanimation-direction), и они сохраняются в течение всего периодаanimation-delay.both- Правила forwards и backwards применяются вместе.
Режим заполнения forwards
Когда анимация заканчивается, элемент сохраняет значения стилей последнего кейфрейма.
Prompt
Создайте CSS-анимацию, которая перемещает красный блок div размером 100x100px слева (0px) направо (250px) с помощью @keyframes, с animation-fill-mode равным forwards, чтобы элемент сохранял стили последнего кейфрейма после окончания анимации. Используйте продолжительность 3s.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Fill Mode Forwards</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: myAnimation;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes myAnimation {
from {left: 0px;}
to {left: 250px; background-color: yellow;}
}
</style>
</head>
<body>
<h1>animation-fill-mode: forwards</h1>
<p>The div retains the style values from the last keyframe when the animation ends:</p>
<div></div>
</body>
</html>
Режим заполнения backwards
В период задержки, до начала анимации, элемент уже показывает значения стилей первого кейфрейма.
Prompt
Создайте CSS-анимацию, которая перемещает красный блок div размером 100x100px слева направо с помощью @keyframes, с animation-delay 2s и animation-fill-mode равным backwards, чтобы элемент получал стили первого кейфрейма в течение периода задержки. Первый кейфрейм должен задавать background-color жёлтым и left равным 0px.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Fill Mode Backwards</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: myAnimation;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}
@keyframes myAnimation {
from {left: 0px; background-color: yellow;}
to {left: 250px; background-color: blue;}
}
</style>
</head>
<body>
<h1>animation-fill-mode: backwards</h1>
<p>The div gets the style values set by the first keyframe before the animation starts (during the delay):</p>
<div></div>
</body>
</html>
Режим заполнения both
Стили первого кейфрейма появляются до начала, а стили последнего кейфрейма остаются после окончания.
Prompt
Создайте CSS-анимацию, которая перемещает красный блок div размером 100x100px слева направо с помощью @keyframes, с animation-delay 2s и animation-fill-mode равным both, чтобы элемент получал стили первого кейфрейма до начала и сохранял стили последнего кейфрейма после окончания. Используйте продолжительность 3s.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Fill Mode Both</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: myAnimation;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}
@keyframes myAnimation {
from {left: 0px; background-color: yellow;}
to {left: 250px; background-color: blue;}
}
</style>
</head>
<body>
<h1>animation-fill-mode: both</h1>
<p>The div gets the first keyframe styles before starting and retains the last keyframe styles after ending:</p>
<div></div>
</body>
</html>
Сокращённое свойство CSS для анимации
Отдельные строки для каждого свойства анимации не нужны: сокращённое свойство animation задаёт их все в одной строке.
Полные свойства
Здесь по отдельности записаны шесть свойств анимации.
Prompt
Создайте CSS-анимацию, используя отдельные свойства анимации: animation-name myAnimation, animation-duration 5s, animation-timing-function linear, animation-delay 2s, animation-iteration-count infinite и animation-direction alternate. Анимация должна перемещать красный блок div размером 100x100px слева направо.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Longhand Properties</title>
<style>
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@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;}
}
</style>
</head>
<body>
<h1>Animation Using Individual Properties</h1>
<p>This example uses six individual animation properties:</p>
<div></div>
</body>
</html>
Сокращённое свойство
С сокращённым свойством animation эффект получается таким же, как в примере выше.
Prompt
Создайте CSS-анимацию, используя сокращённое свойство animation, чтобы объединить все значения в одной строке: animation: myAnimation 5s linear 2s infinite alternate. Анимация должна перемещать красный блок div размером 100x100px слева направо.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Shorthand Property</title>
<style>
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation: myAnimation 5s linear 2s infinite alternate;
}
@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;}
}
</style>
</head>
<body>
<h1>Animation Shorthand Property</h1>
<p>The same animation effect using the shorthand animation property:</p>
<div></div>
</body>
</html>