CSS @keyframes Rule
Пример
Сделать элемент двигаться постепенно 200px вниз:
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
Подробнее примеры ниже.
Определение и использование
Правило @keyframes указывает код анимации.
Анимация создается путем постепенного изменения из одного набора стилей CSS в другой.
Во время анимации можно многократно изменять набор стилей CSS.
Укажите, когда изменение стиля произойдет в процентах, или с ключевыми словами "from" и "to", что равно 0% и 100%. 0% — начало анимации, 100% — когда анимация завершена.
Совет: Для лучшей поддержки браузера, вы всегда должны определить как 0% и 100% селекторов.
Примечание: Используйте свойства анимации для управления внешним видом анимации, а также для привязки анимации к селекторам.
Примечание: Главное правило игнорируется в ключевом кадре (см. Последний пример на этой странице).
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает правило.
Номера следуют -webkit-, -moz- or -o- Укажат первую версию, которая работала с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| @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;}}
Значения свойств
| Значение | Описание |
|---|---|
| animationname | Обязательно. Определяет имя анимации. |
| keyframes-selector | Обязательно. Процент от продолжительности анимации. Правовые ценности: 0-100% Примечание: В одной анимации может быть много ключевых кадров-селекторов. |
| css-styles | Обязательно. Один или несколько правовых свойств стиля CSS |
Другие примеры
Пример
Добавьте несколько селекторов ключевых кадров в одну анимацию:
@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;}
}
Пример
Примечание: Главное правило игнорируется в ключевом кадре:
@keyframes myexample
{
from {top: 0px;}
50% {top: 100px !important;} /* ignored
*/
to {top: 200px;}
}
Похожие страницы
CSS Справочник: CSS Анимация