Правило CSS @keyframes
Пример
Заставьте элемент двигаться постепенно на 200 пикселей вниз:
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Правило @keyframes
определяет код анимации.
Анимация создается путем постепенного перехода от одного набора стилей CSS к другому.
Во время анимации вы можете многократно менять набор стилей CSS.
Укажите, когда произойдет изменение стиля, в процентах или с помощью ключевых слов «от» и «до», что соответствует 0% и 100%. 0% — это начало анимации, 100% — когда анимация завершена.
Совет. Для лучшей поддержки браузера всегда следует определять селекторы 0% и 100%.
Примечание. Используйте свойства анимации для управления внешним видом анимации, а также для привязки анимации к селекторам.
Примечание. В ключевом кадре правило !important игнорируется (см. последний пример на этой странице).
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, полностью поддерживающую правило.
Цифры, за которыми следует -webkit-, -moz- или -o-, указывают на первую версию, которая работала с префиксом.
Property | |||||
---|---|---|---|---|---|
@keyframes | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
Синтаксис CSS
@keyframes animationname {keyframes-selector {css-styles;}}
Значения свойств
Value | Description |
---|---|
animationname | Required. Defines the name of the animation. |
keyframes-selector | Required. Percentage of the animation duration. Legal values: 0-100% Note: You can have many keyframes-selectors in one animation. |
css-styles | Required. One or more legal CSS style properties |
Дополнительные примеры
Пример
Добавьте несколько селекторов ключевых кадров в одну анимацию:
@keyframes mymove
{
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;}
}
Пример
Многие селекторы ключевых кадров со многими стилями 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;}
}
Пример
Примечание. В ключевом кадре правило !important игнорируется:
@keyframes myexample
{
from {top: 0px;}
50% {top: 100px !important;} /* ignored
*/
to {top: 200px;}
}
Связанные страницы
Учебное пособие по CSS: CSS-анимации