СSS3 Анимация
CSS3 Анимации
CSS3 анимации позволяют анимировать большинство HTML элементов без использования JavaScript или Flash!
Поддержка браузера анимации
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Номер, за которыми следуют -webkit-,-moz-,
или -o- указывает первую версию, которая работает с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| @keyframes | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
| animation | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
Что такое CSS3 анимация?
Анимация позволяет элементу постепенно переходить из одного стиля в другой.
Вы можете изменить, много свойств CSS, которые вы хотите изменить, много раз, сколько вы хотите.
Чтобы использовать анимацию CSS3, необходимо сначала указать некоторые ключевые кадры для анимация.
Ключевые кадры содержат стили элементов, которые будут иметь в определенное время.
Правило @keyframes
При указании стилей CSS3 внутри правила @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 секунд).
В приведенном выше примере мы указали, когда стиль изменится с помощью
ключевых слов "from" и "to"
(что составляет 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;}
}
/* 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;
}
Редактор кода »
Следующий пример использует значение 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-timing-function может иметь следующие значения:
ease- Задает анимацию с медленным запуском, затем быстрее, затем медленно завершается (по умолчанию)linear- Задает анимацию с одинаковой скоростью от начала до концаease-in- Задает анимацию с медленным запускомease-out- Определяет анимацию с медленным концомease-in-out- Задает анимацию с медленным началом и концомcubic-bezier(n,n,n,n)- Позволяет определить собственные значения в функцииcubic-bezier
В следующем примере показаны некоторые из различных движений скорости, которые можно использовать:
Пример
#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;}
Редактор кода »
Указать режим заливки анимации
CSS3 анимации не влияют на элемент до первого кадра движения или после последнего ключевого кадра.
Свойство animation-fill-mode может переопределить это поведение.
Свойство animation-fill-mode задает
стиль целевого элемента, когда анимация не воспроизводится (до ее
начала, после того, как она заканчивается, или вместе).
Свойство animation-fill-mode может иметь следующие значения:
none- Значение по умолчанию. Анимации не будет применять любые стили к элементу до или после его выполнения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;
}
Редактор кода »
Сокращение CSS3 свойств анимации
В приведенном ниже примере используются шесть свойств анимации:
Пример
div
{
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Редактор кода »
Тот же эффект анимации, что и выше, может быть достигнут с помощью сокращения свойств
animation:
Проверьте себя с помощью упражнений!
Свойства CSS3 Анимации
В следующей таблице перечислены правила @keyframes и все свойства анимации CSS3:
| Свойство | Описание |
|---|---|
| @keyframes | Задает код анимации |
| animation | Сокращенное свойство для установки всех свойств анимации |
| animation-delay | Задает задержку запуска анимации |
| animation-direction | Указывает, должна ли анимация воспроизводиться вперед, назад или в других циклах |
| animation-duration | Определяет, сколько времени анимация должна занять для завершения одного цикла |
| animation-fill-mode | Задает стиль для элемента, когда анимация не воспроизводится (с начала, после окончания или оба) |
| animation-iteration-count | Указывает, сколько раз анимация должна воспроизводиться |
| animation-name | Задает имя анимации @keyframes |
| animation-play-state | Указывает, запущена или приостановлена анимация |
| animation-timing-function | Задает скорость движения анимации |
