УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS

CSS3 Правило @keyframes


CSS Справочник Детальный 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;}
}

Попробуйте сами »
Еще примеры внизу этой страницы.

Поддержка Браузерами

Internet Explorer Firefox Opera Google Chrome Safari

Правило @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 Справочник Полный CSS Справочник




© 2011 - 2022 Уроки CSS