Свойство @keyframes в CSS
,

Свойство @keyframes в CSS

Содержание

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

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

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

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

Поддержка браузерами

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

  • -webkit- для Google Chrome 4.0, Safari 4.0 и Opera 15.0
  • -moz- для Mozilla Firefox 5.0
  • -o- для Opera 12.0

Синтаксис

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

@keyframes animationname — это имя анимации. Вы можете выбрать любое имя для анимации, чтобы потом использовать его в CSS.

keyframes-selector — это процент времени, когда будет применён стиль. Например, 0% — начало анимации, 100% — её конец. Можно использовать промежуточные значения, например, 50% для середины.

css-styles — это стили, которые будут применяться на указанном этапе анимации.

Пример:

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

В этом примере анимация fadeIn плавно увеличивает прозрачность элемента от 0% до 100%.

Пример более сложной анимации:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Complex Animation Example</title>
  <style>
    .animated-box {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      margin: 50px auto;
      animation: complexAnimation 5s infinite;
    }

    @keyframes complexAnimation {
      0% {
        transform: rotate(0deg);
        background-color: lightblue;
        width: 100px;
        height: 100px;
      }
      25% {
        transform: rotate(90deg);
        background-color: lightgreen;
        width: 150px;
        height: 150px;
      }
      50% {
        transform: rotate(180deg);
        background-color: orange;
        width: 100px;
        height: 100px;
      }
      75% {
        transform: rotate(270deg);
        background-color: pink;
        width: 150px;
        height: 150px;
      }
      100% {
        transform: rotate(360deg);
        background-color: lightblue;
        width: 100px;
        height: 100px;
      }
    }
  </style>
</head>
<body>
  <div class="animated-box"></div>
</body>
</html>

Вначале (0%) квадрат имеет размер 100x100px и светло-голубой цвет.

На 25% анимации квадрат поворачивается на 90 градусов, увеличивается до 150x150px и меняет цвет на светло-зелёный.

На 50% он поворачивается на 180 градусов, возвращается к исходному размеру и становится оранжевым.

На 75% поворачивается на 270 градусов, снова увеличивается и становится розовым.

На 100% возвращается к исходным параметрам: светло-голубой цвет, размер 100x100px и полный оборот (360 градусов).

Посмотреть, как это работает

CSS, keyframes, селекторы