СSS Свойство СSS3 Правило @keyframes
Пример
Сделайте чтобы элемент постепенно двигался 200px вниз:
@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;}}
Значение свойств
| Значение | Описание |
|---|---|
| animationname | Требуемый. Определяет имя анимации. |
| keyframes-selector | Требуемый. Процент продолжительности анимации. Правовые ценности: 0-100% Примечание: Вы можете иметь много ключевых keyframes-selector в одной анимации. |
| 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;}
}
Попробовать »
Пример
Примечание: Правило !important правило игнорируется в ключевом кадре:
@keyframes myexample
{
from {top: 0px;}
50% {top: 100px !important;} /* игнорируемый
*/
to {top: 200px;}
}
Попробовать »
Связанные страницы
CSS учебник: CSS Animations
