Правило @keyframes CSS

В CSS правило @keyframes можно использовать для создания анимаций. Анимация создается за счет постепенного изменения одного CSS стиля в другой. В процессе анимации можно несколько раз изменить настройки CSS стиля, указав изменение в процентах или ключевые слова "from" и "to", что эквивалентно 0% и 100%. 0% — это начало анимации, 100% — это конец анимации. Для достижения наилучшей совместимости с браузерами рекомендуется всегда определять селекторы для 0% и 100%.

@keyframes — это новое правило в CSS3, которое поддерживается всеми主流ыми браузерами (с соответствующими префиксами) и не совместимо с браузерами IE 9 и более ранними версиями.

Синтаксис правила @keyframes

Грамматика правила такова:

@keyframes animationname {keyframes-selector {css-styles;}};

Описание свойств значения

animationname: определить имя анимации;

keyframes-selector: процент продолжительности анимации, возможные значения: 0-100%, from (равно 0%), to (равно 100%). Вы можете использовать один или несколько анимационных keyframes-selectors;

css-styles: один или несколько законных свойств CSS стилей;

Ниже приведен пример реального правила @keyframes.

　　　　　　.box {
　　　　　　　　　　width: 50px;
　　　　　　　　　　height: 50px;
　　　　　　　　　　background: red;
　　　　　　　　　　position: relative;
　　　　　　　　　　/* Chrome, Safari, Opera */
　　　　　　　　　　-webkit-animation-name: moveit;
　　　　　　　　　　-webkit-animation-duration: 2s;
　　　　　　　　　　
　　　　　　　　　　animation-name: moveit;
　　　　　　　　　　animation-duration: 2s;
　　　　　　}
　　　　　　　
　　　　　　/* Chrome, Safari, Opera */
　　　　　　@-webkit-keyframes moveit {
　　　　　　　　　　from {left: 0;}
　　　　　　　　　　to {left: 50%;}
　　　　　　}
　　　　　　　
　　　　　　
　　　　　　@keyframes moveit {
　　　　　　　　　　from {left: 0;}
　　　　　　　　　　to {left: 50%;}
　　　　　　}

Параметры

Таблица ниже описывает параметры этого правила.

Совместимость браузеров

Совместимость браузеров для свойства @keyframes, числа в таблице представляют собой минимальную версию браузера, поддерживающего это свойство; все основные браузеры поддерживают это правило.

Дополнительное чтение

Пожалуйста, обратитесь к следующим руководствам:CSS Media Types。