CSS3 анимации
Свойство CSS Animation используется для определения анимации элементов веб-страницы.
Вы можете изменять столько свойств CSS, сколько захотите, сколько угодно раз.
Keyframes
используются при определении анимации.
Он содержит различные стили элемента, которые он имел бы в определенное время.
Как работает CSS3-анимация
Анимация, определенная в
@keyframe
правиле, должна быть добавлена с помощью селектора;
иначе анимация работать не будет.
Анимацию можно добавить в селектор, указав имя и продолжительность анимации.
Свойства анимации CSS3
| Характеристики | Описание |
|---|---|
| @keyframes | Он определяет разные стили анимации с разной продолжительностью. |
| анимация | Это сокращенное свойство, позволяющее установить все свойства сразу. |
| анимация-задержка | Он указывает период времени, по истечении которого анимация начнется. |
| режим заливки анимации | он определяет статический стиль элемента. |
| количество итераций анимации | Он указывает, сколько раз должна воспроизводиться анимация. |
| состояние воспроизведения анимации | Он указывает, запущена ли анимация или приостановлена. |
| имя-анимации | В нем указывается имя анимации @keyframes. |
| функция времени анимации | Он определяет кривую скорости анимации. |
Пример
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Animation </title>
<meta charset="UTF-8">
<style>
div {
width: 100px;
height: 100px;
background-color: red;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* Standard syntax */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
</style>
</head>
<body>
<div></div>
<p><b>Note:</b> When an animation is finished, it changes back to its original style.</p>
</body>
</html>Выход
Примечание. По окончании анимации ее стиль возвращается к исходному.
Примечание.
Если свойство animation-duration не указано, анимация не будет иметь никакого эффекта, поскольку значение по умолчанию - 0.
Пример
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Animation </title>
<meta charset="UTF-8">
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
}
/* Safari 4.0 - 8.0 */
@-webkit-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;}
}
/* Standard syntax */
@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;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>Выход
Задержать анимацию
animation-delay
Свойство используется ,
чтобы указать задержку начала анимации.
В приведенном ниже примере попытайтесь понять, как работает это свойство, и внесите некоторые изменения в значение свойства в редакторе.
Пример
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Animation Delay </title>
<meta charset="UTF-8">
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
-webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
/* Safari 4.0 - 8.0 */
@-webkit-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;}
}
/* Standard syntax */
@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;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>Выход
Запустить множественную анимацию
animation-iteration-count
Свойство определяет ,
сколько раз анимация должна работать.
Посмотрите на приведенный ниже пример, чтобы узнать, сколько раз запускается анимация, а также измените значение, а затем проследите за изменениями.
Пример
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Multiple Animation </title>
<meta charset="UTF-8">
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
-webkit-animation-iteration-count: 3; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
/* Safari 4.0 - 8.0 */
@-webkit-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;}
}
/* Standard syntax */
@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;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>Выход
Запуск анимации в обратном направлении
В
animation-direction
собственности указывает ,
что анимация работают в обратном направлении или альтернативных циклов.
Пример
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Reverse Animation </title>
<meta charset="UTF-8">
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
-webkit-animation-iteration-count: 3; /* Safari 4.0 - 8.0 */
-webkit-animation-direction: alternate; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction: alternate;
}
/* Safari 4.0 - 8.0 */
@-webkit-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;}
}
/* Standard syntax */
@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;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>Выход
Скорость анимации
animation-timing-function
Свойство определяет различные скорости анимации.
Различные значения этого свойства дают элементу разные кривые скорости.
Функция может иметь следующие значения:
- легкость - это значение по умолчанию. Медленное начало, затем быстрое, затем медленно заканчивается.
- linear - имеет одинаковую скорость от начала до конца.
- легкость - приводит к медленному запуску.
- легкость выхода - приводит к медленному завершению.
- легкость входа - приводит к медленному началу и завершению.
- cubic-bezier (n, n, n, n) - позволяет вам определять свои собственные значения.
В приведенном ниже примере вы можете увидеть использование всех этих значений.
Пример
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Animation Speed </title>
<meta charset="UTF-8">
<style>
div {
width: 100px;
height: 50px;
text-align: center;
padding-top:30px;
background-color: seagreen;
font-weight: bold;
position: relative;
-webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
animation: mymove 5s infinite;
}
/* Safari 4.0 - 8.0 */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}
/* Standard syntax */
#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;}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
from {left: 0px;}
to {left: 300px;}
}
/* Standard syntax */
@keyframes mymove {
from {left: 0px;}
to {left: 300px;}
}
</style>
</head>
<body>
<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>
</body>
</html>