CSS свойство @keyframes

❮ Назад Вперед ❯

Правило @keyframes является основой для анимации ключевых кадров, используемых для анимирования (постепенного перехода от одной стили к другому) CSS свойств. Данное правило позволяет указывать, что будет в определенный момент анимации с помощью указания стилей для ключевых кадров (или промежуточных этапов) в последовательности анимации.

За правилом @keyframes и его идентификатором следует совокупность правил (т.е. правила стилей вместе с селекторами и блоками декларации как в обычном CSS коде), разделенные фигурными скобками.

В фигурных скобках вставляются селекторы ключевых кадров, которые указывают ключевые кадры в последовательности анимации, когда должны быть изменены стили. В последовательности анимации набор CSS стилей может быть изменен несколько раз.

Блок декларации ключевых кадров содержит CSS свойства и их значения. Селектор ключевого кадра может начинаться процентом (%) или ключевыми словами “from” (0%) и “to” (100%). 0% - начальная точка анимации, 100% - конечная точка.

Правило @keyframes полностью поддерживается большинством браузеров. Но для некоторых браузеров могут быть использованы префиксы:

-webkit- Google Chrome 4.0
-moz- Mozilla Firefox 5.0
-webkit- Safari 4.0
-webkit- Opera 15.0
-o- Opera 12.0

Синтаксис

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

Правило @keyframes содержит ключевое слово “@keyframes”, за которым следует идентификатор (выбранный разработчиком), устанавливающий анимацию. Чтобы объединить анимацию с конкретным элементом, этот идентификатор используется как значение для свойства animation-name.

Он будет иметь следующий вид:

/* define the animation */
@keyframes your-animation-name {
/* style rules */
}
/* apply it to an element */
.element {
animation-name: your-animation-name;
/* OR using the animation shorthand property */
animation: your-animation-name 1s … ;
}

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .element {
      padding: 50px;
      animation: backgrounds 4s infinite;
      }
      @keyframes backgrounds {
      0% { background-color: #8ebf42}
      50% { background-color: #1c87c9; }
      100% { background-color: #ccc; }
      }
    </style>
  </head>
  <body>
    <h2>Пример CSS свойство @keyframes </h2>
    <div class="element">Фон текста анимируется.</div>
  </body>
</html>

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

В данном пример мы анимируем свойство background color. Сначала устанавливаем идентификатор для анимации - bouncing. Затем устанавливаем селекторы ключевых кадров - 0%, 50% и 100% и задаем значения для свойства - green, blue и grey. Это означает, что в начальной точке (0%) фоновый цвет будет светло-зеленым до тех пор, пока не достигнет другого ключевого кадра (50%). В середине последовательности анимации фон станет светло-синим ( 50%-100%), а в конце анимации (100%) он будет серым.

Рассмотрим другой пример с правилом @keyframes:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div {
      width: 10px;
      height: 100px;
      background: red;
      border-radius: 50%;
      position: relative;
      -webkit-animation: element 4s infinite; 
      animation: element 4s infinite;
      }
      @-webkit-keyframes element {
      0%   {top: 0px; background: #1c87c9; width: 100px;}
      100% {top: 200px; background: #8ebf42; width: 150px;}
      }
      @keyframes element {
      0%   {top: 0px; background: #1c87c9; width: 100px;}
      100% {top: 200px; background: #8ebf42; width: 150px;}
      }
    </style>
  </head>
  <body>
    <h2>Пример правила @keyframes</h2>
    <div></div>
  </body>
</html>

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

Пример, где изображение падает при помощи правила @keyframes:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      html, body {
      height: 90%;
      } 
      .container {
      margin: 30px auto;
      min-width: 320px;
      max-width: 600px;
      height: 90%;
      overflow: hidden;
      }
      img {
      -webkit-transform-origin: left center;
      -ms-transform-origin: left center;
      transform-origin: left center;
      -webkit-animation: fall 5s infinite;
      animation: fall 5s infinite;
      }
      @-webkit-keyframes fall{
      from {
      -webkit-transform: rotate(0) translateX(0);
      transform: rotate(0) translateX(0);
      opacity: 1;
      }
      to {
      -webkit-transform: rotate(90deg) translateX(200px);
      transform: rotate(90deg) translateX(200px);
      opacity: 0.1;
      }
      }
      @keyframes fall{
      from {
      -webkit-transform: rotate(0) translateX(0);
      transform: rotate(0) translateX(0);
      opacity: 1;
      }
      to {
      -webkit-transform: rotate(90deg) translateX(200px);
      transform: rotate(90deg) translateX(200px);
      opacity: 0.1;
      }
      }
    </style>
  </head>
  <body>
    <h2>Пример @keyframes</h2>
    <div class="container">
      <img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs" width="150" height="50"/>
    </div>
  </body>
</html>

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

Значения

Значение	Описание
animationname	Указывает название анимации. Необходимое значение.
keyframes-selector	Указывает процент длительности анимации. Значения: 0-100% from (same as 0%) to (same as 100%) Необходимое значение.
css-styles	CSS свойства стилей. Необходимое значение.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.