Закрыть   X

  •    
  •    
Печать

@keyframes

Автор: Алексей Елизаров.

CSS свойство @keyframes

Поддержка браузеров

Описание

С помощью правила @keyframes можно создавать анимацию.

Анимация создается путем постепенного изменения от одного множества CSS стилей к другому.

Во время анимации можно изменять набор CSS стилей любое количество раз.

Указывайте, когда изменение произойдет в процентах или с помощью ключевых слов "from" и "to", которые означают 0% и 100% соответственно.

0% это начало анимации, 100% - это когда анимация завершена.

Для лучшей поддержки браузерами, всегда следует определять два селектора 0% и 100%.

Используйте свойства анимации для управления процессом анимации, а также для привязки анимации к селекторам.

Значения свойства

Значение Описание
имя_анимации Обязательный параметр. Определяет название анимации.
селектор-ключевого-кадра Обязательный параметр. Указывается в процентах от продолжительности анимации.

Допустимые значения:

0-100%
from (то же, что и 0%)
to (то же, что и 100%)

Замечание: Вы можете указывать множество селекторов ключевого кадра в одной анимации.
css-стили Обязательный параметр. Один или более допустимых свойств CSS стилей.

div{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 4s infinite;
-moz-animation:mymove 4s infinite; /* Firefox */
-webkit-animation:mymove 4s infinite; /*Safari и Chrome*/
}

@keyframes mymove{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:530px; background:blue;}
50% {top:100px; left:530px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

@-moz-keyframes mymove{ /* Firefox */
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:530px; background:blue;}
50% {top:100px; left:530px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-webkit-keyframes mymove{ /* Safari и Chrome */
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:530px; background:blue;}
50% {top:100px; left:530px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}


 


© 2018 cssprofi.ru.Алексей Елизаров. Все права защищены
cssprofi.ru - запрещено использование материалов сайта без согласия его автора и обратной ссылки