CSS3 Animations
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 Animations?
Анимация позволяет элемент постепенно меняться от одного стиля к другому.
Вы можете изменить как много CSS свойств, которые вы хотите, как много раз вы хотите.
Чтобы использовать CSS3 анимацию, необходимо сначала определить несколько ключевых кадров для анимации.
Keyframes держать какие стили элемент будет иметь в определенное время.
@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 свойство не задано, то анимация не будет иметь никакого эффекта, так как значение по умолчанию равно 0.
В приведенном выше примере мы определили , когда стиль будет меняться, используя ключевые слова "from" и "to" (который представляет собой 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;
} Попробуй сам " Установить, сколько раз анимация должна работать
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 свойство используется , чтобы позволить анимационного работать в обратном направлении или альтернативных циклов.
В следующем примере будет запускать анимацию в обратном направлении:
пример
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction:
reverse;
} Попробуй сам " В следующем примере используется значение "alternate" , чтобы сделать анимацию сначала запустить вперед, затем назад, затем вперед:
пример
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction:
alternate;
} Попробуй сам " Укажите скорость кривой анимации
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;} Попробуй сам " Анимация сокращённое свойство
В приведенном ниже примере использует шесть свойств анимации:
пример
div
{
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Попробуй сам " Тот же эффект анимации , как описано выше может быть достигнуто путем использования сокращенную animation свойства:
Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 » Упражнение 6»
CSS3 Свойства анимации
В следующей таблице перечислены @keyframes правила и все свойства анимации:
| Имущество | Описание |
|---|---|
| @keyframes | Определяет код анимации |
| animation | Сокращённое свойство для установки всех свойств анимации |
| animation-delay | Определяет задержку начала анимации |
| animation-direction | Определяет, должен ли анимация играть в обратном направлении или альтернативных циклов |
| animation-duration | Определяет, сколько секунд или миллисекунды анимации требуется, чтобы завершить один цикл |
| animation-fill-mode | Определяет стиль для элемента, когда анимация не воспроизводится (когда она будет закончена, или если она имеет задержку) |
| animation-iteration-count | Указывает, сколько раз анимация должна играть |
| animation-name | Задает имя анимации @keyframes |
| animation-play-state | Определяет, будет ли анимация работает или приостановлена |
| animation-timing-function | Определяет кривую скорости анимации |