Правило CSS @keyframes

  • Предыдущая страница justify-self
  • Следующая страница @layer

Определение и использование

С помощью правила @keyframes вы можете создать анимацию.

Принцип создания анимации заключается в постепенном изменении одного набора CSS стилей в другой.

В процессе анимации вы можете多次 изменить это набор CSS стилей.

Изменения можно определить в процентах или через ключевые слова "from" и "to", что эквивалентно 0% и 100%.

0% - это время начала анимации, 100% - время окончания анимации.

Совет:Для получения наилучшей поддержки браузерами вы должны всегда определять селекторы 0% и 100%.

Совет:Используйте атрибуты анимации для управления внешним видом анимации, а также для привязки анимации к селектору.

Внимание:!important правило игнорируется в ключевых кадрах (см. последний пример на этой странице).

Дополнительная литература:

Обучение CSS3:Анимация CSS3

Пример

Пример 1

Сделать div элемент匀но опускаться вниз:

@keyframes mymove {
  from {top: 0px;}
  to {top: 200px;}
}

Попробуйте сами

Пример 2

Добавление нескольких ключевых кадров в анимацию:

@keyframes mymove {
  0%   {top: 0px;}
  25%  {top: 200px;}
  50%  {top: 100px;}
  75%  {top: 200px;}
  100% {top: 0px;}
}

Попробуйте сами

Пример 3

Изменение нескольких CSS стилей в анимации:

@keyframes mymove {
  0%   {top: 0px; background: red; width: 100px;}
  100% {top: 200px; background: yellow; width: 300px;}
}

Попробуйте сами

Пример 4

Множественные ключевые кадры с несколькими 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;}
}

Попробуйте сами

Пример 5

Внимание:Правило !important заблокировано в ключевых кадрах:

@keyframes myexample {
  from {top: 0px;}
  50%  {top: 100px !important;} /* Заблокировано */
  to   {top: 200px;}
}

Попробуйте сами

CSS грамматика

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

Значение свойства

Значение Описание
animationname Обязателен. Определение названия анимации.
keyframes-selector

Обязателен. Процент продолжительности анимации.

Допустимые значения:

  • 0-100%
  • from (равен 0%)
  • to (равен 100%)
css-styles Обязателен. Один или несколько合法ных CSS стилей.

Браузерная поддержка

Chrome IE / Edge Firefox Safari Opera
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-
  • Предыдущая страница justify-self
  • Следующая страница @layer