Иллюстрация: Кира Кустова

`@keyframes`

Как настоящие художники-постановщики, создаём раскадровку для анимации.

Время чтения: меньше 5 мин

Кратко

Скопировано

Директива @keyframes используется для создания ключевых кадров CSS-анимаций.

Пример

Скопировано

        
          
          @keyframes circle-to-square {  from {    border-radius: 50%;    background-color: red;  }  to {    border-radius: 0;    background-color: blue;  }}
          @keyframes circle-to-square {
  from {
    border-radius: 50%;
    background-color: red;
  }
  to {
    border-radius: 0;
    background-color: blue;
  }
}

Как понять

Скопировано

Что из себя представляет любая анимация? Это переход от одного состояния элемента к другому состоянию.

Чтобы рассказать браузеру, с чего начать и чем закончить анимацию, используется директива @keyframes.

Как пишется

Скопировано

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

Ключевые кадры могут прописываться при помощи ключевых слов from (начальный кадр) и to (конечный кадр). Это удобно, если у вас всего два ключевых кадра. Если же кадров больше двух, то можно использовать проценты.

        
          
          @keyframes circle-to-square {  from {    border-radius: 50%;    background-color: red;  }  50% {    border-radius: 25%;    background-color: green;  }  to {    border-radius: 0;    background-color: blue;  }}
          @keyframes circle-to-square {
  from {
    border-radius: 50%;
    background-color: red;
  }
  50% {
    border-radius: 25%;
    background-color: green;
  }
  to {
    border-radius: 0;
    background-color: blue;
  }
}

Браузер расшифровывает ключевое слово from как 0%, а ключевое слово to как 100%.

Подсказки

Скопировано

💡 Задавайте уникальное имя каждой анимации.

💡 from равно 0%, to равно 100%.

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

        
          
          @keyframes circle-to-square {  to {    border-radius: 0;    background-color: blue;  }}
          @keyframes circle-to-square {
  to {
    border-radius: 0;
    background-color: blue;
  }
}