CSS Анимации
CSS Анимации
CSS позволяет сделать анимацию HTML-элементов без использования JavaScript или Flash!
В этой главе вы узнаете о следующих свойствах:
@keyframesanimation-nameanimation-durationanimation-delayanimation-iteration-countanimation-directionanimation-timing-functionanimation-fill-modeanimation
Браузерная поддержка анимации
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| @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 анимация постепенно изменится с текущего стиля на новый в определенные моменты времени.
Чтобы анимация работала, вы должны привязать её к элементу.
В следующем примере анимация "example" связывается с элементом <div>. Анимация будет длиться 4 секунды и постепенно изменит цвет фона элемента <div> с красного - "red" на желтый - "yellow":
Пример
/* Код анимации */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* Элемент, к которому применяется анимация */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Попробуйте сами »
Примечание: Свойство animation-duration свойство определяет, сколько времени анимация должна занять для завершения. Если свойство animation-duration не указано, анимация не будет выполняться, поскольку значение по умолчанию равно 0s (0 секунд).
В приведенном выше примере мы указали, когда стиль изменится, используя ключевые слова "от" и "до" (что соответствует 0% (начало) и 100% (завершение)).
Также можно использовать проценты. Используя проценты, вы можете добавлять столько стилей, сколько хотите.
В следующем примере будет изменен цвет фона элемента <div>, когда анимация завершена на 25%, завершена на 50% и снова, когда анимация завершена на 100%:
Пример
/* Код анимации */
@keyframes example
{
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: example;
animation-duration: 4s;
}
Попробуйте сами »
Следующий пример изменит цвет фона и положение элемента <div>, когда анимация завершена на 25%, завершена на 50%, и снова, когда анимация завершена на 100%:
Пример
/* Код анимации */
@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;}
}
/* Элемент, к которому применяется анимация */
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;
}
Попробуйте сами »
В следующем примере используется значение "alternate", чтобы сначала запустить анимацию вперед, а затем назад:
Пример
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-timer-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- Элемент сохранит значения стиля, установленные последним ключевым кадром - зависит от animation-direction (направления анимации) и animation-iteration-count (итеративного подсчета анимации)backwards- Элемент получит значения стиля, заданные первым ключевым кадром - зависит от animation-direction (направления анимации), и сохранит его в течение периода animation-delay (задержки анимации)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:
Проверьте себя с помощью упражнений!
CSS Свойства анимации
В следующей таблице перечислены правила @keyframes и все свойства CSS-анимации:
| Свойство | Описание |
|---|---|
| @keyframes | Определяет код анимации |
| animation | Сокращенное свойство для установки всех свойств анимации |
| animation-delay | Определяет задержку начала анимации |
| animation-direction | Определяет, должна ли анимация воспроизводиться вперед, назад или поочередно |
| animation-duration | Определяет, сколько времени анимация должна занять для завершения одного цикла |
| animation-fill-mode | Определяет стиль для элемента, когда анимация не воспроизводится (до его начала, после его завершения или и того, и другого) |
| animation-iteration-count | Определяет, сколько раз анимация должна проигрываться |
| animation-name | Определяет имя анимации @keyframes |
| animation-play-state | Указывает, запущена ли анимация или приостановлена |
| animation-timing-function | Определяет кривую скорости анимации |
