При создании анимации в @keyframes, привяжите его к селектору, иначе анимация не будет иметь никакого эффекта.
Примечание: Вы должны определить имя и
продолжительность анимации. Если продолжительность не указана, анимация
не будет работать, так как значение по умолчанию равно 0.
Что такое анимация в CSS3?
Эффект анимации позволяет элементу постепенно изменяться от одного стиля к другому.
Вы можете изменить, так много стилей, сколько вы хотите, столько раз, сколько вы хотите.
Укажите, когда произойдет изменение с помощью процентов, или ключевых слов "from" и "to", это то же, что 0% и 100%.
0% означает начало анимации, 100% означает окончание.
Для лучшей поддержки браузера, вы всегда должны указать оба селектора: 0% и 100%.
Свойства анимации CSS3
В следующей таблице приведены правила @keyframes, и все свойства анимации:
| Свойство | Описание | CSS |
|---|
| @keyframes | Определяет анимацию | 3 |
| animation | Сокращенное свойство для всех свойств анимации, за исключением свойства animation-play-state | 3 |
| animation-name | Определяет имя анимации @keyframes | 3 |
| animation-duration | Определяет, сколько секунд или миллисекунд необходимо для завершения одного цикла анимации. Значение по умолчанию 0 | 3 |
| animation-timing-function | Описывает, как анимация будет развиваться в течении одного цикла. Значение по умолчанию "ease" | 3 |
| animation-delay | Указывает, когда анимация начнется. Значение по умолчанию 0 | 3 |
| animation-iteration-count | Указывает, сколько раз анимация играет. Значение по умолчанию 1 | 3 |
| animation-direction | Определяет, должна ли анимация играть в обратном направлении в чередующиеся циклы. Значение по умолчанию "normal" | 3 |
| animation-play-state | Указывает, будет ли анимация играть или приостановлена. Значение по умолчанию "running" | 3 |
Два примера ниже устанавливают все свойства анимации:
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Firefox: */
-moz-animation-name:myfirst;
-moz-animation-duration:5s;
-moz-animation-timing-function:linear;
-moz-animation-delay:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>