CSS- анимации
CSS-анимации
CSS позволяет анимировать элементы HTML без использования JavaScript или Flash!
В этой главе вы узнаете о следующих свойствах:
@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation
Браузерная поддержка анимации
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
Property | |||||
---|---|---|---|---|---|
@keyframes | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
animation-name | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
animation-duration | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
animation-delay | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
animation-iteration-count | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
animation-direction | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
animation-timing-function | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
animation-fill-mode | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
animation | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
Что такое CSS-анимация?
Анимация позволяет элементу постепенно переходить из одного стиля в другой.
Вы можете изменять столько свойств CSS, сколько хотите, столько раз, сколько хотите.
Чтобы использовать анимацию CSS, вы должны сначала указать некоторые ключевые кадры для анимации.
Ключевые кадры содержат стили, которые элемент будет иметь в определенное время.
Правило @keyframes
Когда вы указываете стили CSS внутри @keyframes
правила, анимация будет постепенно меняться от текущего стиля к новому стилю в определенное время.
Чтобы заставить анимацию работать, вы должны привязать анимацию к элементу.
В следующем примере анимация «пример» привязывается к элементу <div>. Анимация будет длиться 4 секунды, и она постепенно изменит цвет фона элемента <div> с «красного» на «желтый»:
Пример
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Примечание. Это animation-duration
свойство определяет, как долго должна выполняться анимация. Если animation-duration
свойство не указано, анимация не произойдет, поскольку значение по умолчанию равно 0 с (0 секунд).
В приведенном выше примере мы указали, когда стиль изменится, используя ключевые слова «от» и «до» (что соответствует 0% (начало) и 100% (завершение)).
Также можно использовать проценты. Используя проценты, вы можете добавить столько изменений стиля, сколько захотите.
В следующем примере будет изменен фоновый цвет элемента <div>, когда анимация завершена на 25 %, 50 % и снова, когда анимация завершена на 100 %:
Пример
/* The animation code */
@keyframes example
{
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
В следующем примере будет изменен фоновый цвет и положение элемента <div>, когда анимация завершена на 25 %, на 50 % и еще раз, когда анимация завершена на 100 %:
Пример
/* The animation code */
@keyframes example
{
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;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Задержка анимации
Свойство animation-delay
указывает задержку начала анимации.
В следующем примере задержка перед запуском анимации составляет 2 секунды:
Пример
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
Допускаются и отрицательные значения. При использовании отрицательных значений анимация начнется так, как если бы она уже проигрывалась в течение N секунд.
В следующем примере анимация начнется так, как если бы она уже проигрывалась в течение 2 секунд:
Пример
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}
Установите, сколько раз должна запускаться анимация
Свойство animation-iteration-count
указывает, сколько раз должна запускаться анимация.
В следующем примере анимация будет запускаться 3 раза, прежде чем она остановится:
Пример
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
В следующем примере используется значение «infinite», чтобы анимация продолжалась вечно:
Пример
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count:
infinite;
}
Запуск анимации в обратном направлении или альтернативные циклы
Свойство animation-direction
указывает, должна ли анимация воспроизводиться вперед, назад или в чередующихся циклах.
Свойство animation-direction может принимать следующие значения:
normal
- Анимация воспроизводится как обычно (вперед). Это по умолчаниюreverse
- Анимация воспроизводится в обратном направлении (назад)alternate
- Анимация сначала воспроизводится вперед, затем назадalternate-reverse
- Анимация сначала воспроизводится назад, затем вперед
Следующий пример запустит анимацию в обратном направлении (назад):
Пример
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction:
reverse;
}
В следующем примере используется значение «альтернативный», чтобы анимация сначала запускалась вперед, а затем назад:
Пример
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction:
alternate;
}
В следующем примере используется значение «alternate-reverse», чтобы анимация сначала запускалась назад, а затем вперед:
Пример
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction:
alternate-reverse;
}
Задайте кривую скорости анимации
Свойство animation-timing-function
определяет кривую скорости анимации.
Свойство animation-timing-function может принимать следующие значения:
ease
- Определяет анимацию с медленным началом, затем быстрым, а затем медленным завершением (по умолчанию)linear
- Задает анимацию с одинаковой скоростью от начала до концаease-in
- Задает анимацию с медленным стартомease-out
- Определяет анимацию с медленным концомease-in-out
- Указывает анимацию с медленным началом и концомcubic-bezier(n,n,n,n)
- Позволяет определять собственные значения в кубической функции Безье.
В следующем примере показаны некоторые из различных кривых скорости, которые можно использовать:
Пример
#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;}
Укажите режим заполнения для анимации
CSS-анимация не влияет на элемент до воспроизведения первого ключевого кадра или после воспроизведения последнего ключевого кадра. Свойство animation-fill-mode может переопределить это поведение.
Свойство animation-fill-mode
указывает стиль для целевого элемента, когда анимация не воспроизводится (до ее запуска, после ее окончания или в обоих случаях).
Свойство animation-fill-mode может принимать следующие значения:
none
- Значение по умолчанию. Анимация не будет применять какие-либо стили к элементу до или после его выполнения.forwards
- Элемент сохранит значения стиля, установленные последним ключевым кадром (зависит от направления анимации и количества итераций анимации).backwards
- Элемент получит значения стиля, установленные первым ключевым кадром (зависит от направления анимации), и сохранит их в течение периода задержки анимации.both
- Анимация будет следовать правилам как вперед, так и назад, расширяя свойства анимации в обоих направлениях.
В следующем примере элемент <div> позволяет сохранить значения стиля из последнего ключевого кадра, когда анимация заканчивается:
Пример
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}
В следующем примере элемент <div> получает значения стиля, установленные первым ключевым кадром, до начала анимации (во время периода задержки анимации):
Пример
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}
В следующем примере элемент <div> получает значения стиля, установленные первым ключевым кадром, до начала анимации и сохраняет значения стиля из последнего ключевого кадра, когда анимация заканчивается:
Пример
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}
Сокращенное свойство анимации
В приведенном ниже примере используются шесть свойств анимации:
Пример
div
{
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Тот же эффект анимации, что и выше, может быть достигнут с помощью сокращенного
animation
свойства:
Пример
div
{
animation: example 5s linear 2s infinite alternate;
}
Свойства CSS-анимации
В следующей таблице перечислены правило @keyframes и все свойства анимации CSS:
Property | Description |
---|---|
@keyframes | Specifies the animation code |
animation | A shorthand property for setting all the animation properties |
animation-delay | Specifies a delay for the start of an animation |
animation-direction | Specifies whether an animation should be played forwards, backwards or in alternate cycles |
animation-duration | Specifies how long time an animation should take to complete one cycle |
animation-fill-mode | Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both) |
animation-iteration-count | Specifies the number of times an animation should be played |
animation-name | Specifies the name of the @keyframes animation |
animation-play-state | Specifies whether the animation is running or paused |
animation-timing-function | Specifies the speed curve of the animation |