|
CSS3 Правило @keyframes
 Детальный CSS Справочник
Пример
Заставить элемент div постепенно двигаться вниз на 200 пикселей:
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari и Chrome */
{
from {top:0px;}
to {top:200px;}
} |
Попробуйте сами »
Еще примеры внизу этой страницы.
|
Поддержка Браузерами
Правило @keyframes не поддерживается ни одним браузером.
Firefox поддерживает альтернативное правило @-moz-keyframes.
Safari и Chrome поддерживают альтернативное правило @-webkit-keyframes.
Определение и ИспользованиеС помощью правила @keyframes (или правила "ключевых кадров") вы можете создавать анимации.
Анимация создается путем постепенного изменения от одного
множества CSS стилей к другому.
В время анимации вы можете изменять множество CSS стилей сколько угодно раз.
Укажите, когда изменение произойдет в процентах или с помощью ключевых слов "from" и
"to", которые означают 0% и 100% соответственно.
0% это начало аинмации, 100% - это завершение анимации.
Для наилучшей поддержки браузерами всегда следует определять селекторы 0% и 100%.
Замечание: Используйте свойства анимации для управления процессом анимации,
а также для привязки анимации к селекторам.
Синтаксис
| @keyframes { название_анимации селектор-ключевого-кадра {css-стили;}
} |
| Значение |
Описание |
| название_анимации |
Обязательно. Определяет название анимации. |
| селектор-ключевого-кадра |
Обязателен. Указывается в процентах от продолжительности анимации. Допустимые значения: 0-100%
from (то же, что и 0%)
to (то же, что и 100%) Замечание: Вы можете указывать множество селекторов ключевого кадра в
одной анимации. |
| css-стили |
Обязательны. Один или более допустимых CSS свойств стилей |
 |
Попробуйте сами - Примеры |
Пример
Добавление нескольких селекторов ключевого кадра в одной анимации:
@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
@-moz-keyframes mymove /* Firefox */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
@-webkit-keyframes mymove /* Safari и Chrome */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
} |
Попробуйте сами » |
Пример
Изменение нескольких CSS стилей в одной анимации:
@keyframes mymove
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-moz-keyframes mymove /* Firefox */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-webkit-keyframes mymove /* Safari и Chrome */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
} |
Попробуйте сами » |
Пример
Несколько селекторов ключевого кадра с несколькими CSS стилями:
@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; 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:100px; background:blue;}
50% {top:100px; left:100px; 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:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
} |
Попробуйте сами » |
Смотрите ТакжеУроки CSS3: CSS3 Свойства Анимации
Полный CSS Справочник
|
