С помощью правила @keyframes можно создавать анимацию.
Анимация создается путем постепенного изменения от одного множества CSS стилей к другому.
Во время анимации можно изменять набор CSS стилей любое количество раз.
Указывайте, когда изменение произойдет в процентах или с помощью ключевых слов "from" и "to", которые означают 0% и 100% соответственно.
0% это начало анимации, 100% - это когда анимация завершена.
Для лучшей поддержки браузерами, всегда следует определять два селектора 0% и 100%.
Используйте свойства анимации для управления процессом анимации, а также для привязки анимации к селекторам.
| Значение |
Описание |
| имя_анимации |
Обязательный параметр. Определяет название анимации. |
| селектор-ключевого-кадра |
Обязательный параметр. Указывается в процентах от продолжительности анимации.
Допустимые значения:
0-100%
from (то же, что и 0%)
to (то же, что и 100%)
Замечание: Вы можете указывать множество селекторов ключевого кадра в одной анимации. |
| css-стили |
Обязательный параметр. Один или более допустимых свойств CSS стилей. |
Пример
html
head
style type="text/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; }
}
/style
/head
body
pЭтот пример не работает в браузерах Internet Explorer и Opera./p
div>/div
/body
/html
Результат данного примера:
Этот пример не работает в браузерах Internet Explorer и Opera.