Свойство CSS animation-delay
Чтобы анимация подождала перед началом, задайте свойству animation-delay значение времени.
Отрицательное значение тоже работает, и его эффект обратный: анимация начинается так, как будто эта её часть уже воспроизвелась.
Пример
Здесь анимация ждёт 2 секунды, прежде чем начать воспроизводиться:
Prompt
Создайте страницу, показывающую красный блок div размером 100x100px, использующий CSS-анимацию для перемещения слева направо. Установите animation-delay равным 2 секундам, чтобы анимация начиналась после паузы в 2 секунды. Используйте @keyframes для перемещения div от left:0px до left:250px.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Delay</title>
<style>
div.box {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
animation-delay: 2s;
}
@keyframes myAnimation {
from {left: 0px;}
to {left: 250px;}
}
</style>
</head>
<body>
<h1>CSS animation-delay Property</h1>
<p>The animation-delay property specifies a delay for the start of an animation. The following example has a 2 seconds delay before starting the animation:</p>
<div class="box"></div>
</body>
</html>
Отрицательная задержка
Воспроизведение начинается не с начала, как будто 2 секунды уже прошли:
Prompt
Создайте страницу, показывающую красный блок div размером 100x100px, использующий CSS-анимацию для перемещения слева направо. Установите animation-delay равным -2s, чтобы анимация начиналась так, как будто она уже воспроизводилась в течение 2 секунд. Используйте animation-duration 4 секунды и @keyframes для перемещения от left:0px до left:250px.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Negative Animation Delay</title>
<style>
div.box {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
animation-delay: -2s;
}
@keyframes myAnimation {
from {left: 0px;}
to {left: 250px;}
}
</style>
</head>
<body>
<h1>Using Negative Delay</h1>
<p>The animation will start as if it had already been playing for 2 seconds:</p>
<div class="box"></div>
</body>
</html>
Свойство CSS animation-iteration-count
Сколько раз воспроизводится анимация, определяет animation-iteration-count.
Пример
Здесь анимация воспроизводится три раза, а затем останавливается:
Prompt
Создайте страницу, показывающую красный блок div размером 100x100px, использующий CSS-анимацию для перемещения слева направо. Установите animation-iteration-count равным 3, чтобы анимация выполнялась 3 раза. Используйте @keyframes для перемещения div от left:0px до left:250px с продолжительностью 4 секунды.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Iteration Count</title>
<style>
div.box {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
animation-iteration-count: 3;
}
@keyframes myAnimation {
from {left: 0px;}
to {left: 250px;}
}
</style>
</head>
<body>
<h1>CSS animation-iteration-count Property</h1>
<p>The animation will run 3 times before it stops:</p>
<div class="box"></div>
</body>
</html>
Бесконечное повторение
Значение infinite заставляет анимацию продолжаться бесконечно:
Prompt
Создайте страницу, показывающую красный блок div размером 100x100px, использующий CSS-анимацию для бесконечного перемещения слева направо. Установите animation-iteration-count равным infinite. Используйте @keyframes для перемещения div от left:0px до left:250px с продолжительностью 4 секунды.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Infinite Animation</title>
<style>
div.box {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes myAnimation {
from {left: 0px;}
to {left: 250px;}
}
</style>
</head>
<body>
<h1>Infinite Animation</h1>
<p>The animation will run forever:</p>
<div class="box"></div>
</body>
</html>
Свойство CSS animation-timing-function
Кривую скорости анимации задаёт animation-timing-function, которое принимает следующие значения:
ease- значение по умолчанию: медленное начало, затем быстро, затем медленное завершениеlinear- одна постоянная скорость от начала до концаease-in- начинается медленноease-out- завершается медленноease-in-out- начинается и завершается медленноcubic-bezier(n,n,n,n)- ваши собственные значения, заданные в функции cubic-bezier
Пример
Ниже показаны некоторые из доступных кривых скорости:
Prompt
Создайте страницу с пятью красными div-блоками размером 100x100px, расположенными вертикально, каждый из которых демонстрирует другое значение animation-timing-function: linear, ease, ease-in, ease-out и ease-in-out. Все div-блоки анимируются от left:0px до left:250px с продолжительностью 4 секунды и бесконечным числом повторений. Подпишите каждый div названием его функции синхронизации.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Timing Function</title>
<style>
div.box {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
@keyframes myAnimation {
from {left: 0px;}
to {left: 250px;}
}
</style>
</head>
<body>
<h1>CSS animation-timing-function Property</h1>
<p>The animation-timing-function property specifies the speed curve of the animation:</p>
<p>linear:</p>
<div class="box" id="div1"></div>
<p>ease:</p>
<div class="box" id="div2"></div>
<p>ease-in:</p>
<div class="box" id="div3"></div>
<p>ease-out:</p>
<div class="box" id="div4"></div>
<p>ease-in-out:</p>
<div class="box" id="div5"></div>
</body>
</html>