@keyframes — ключевые кадры

Правило @keyframes — основа CSS-анимаций. Оно описывает, какие значения CSS-свойств должны быть в определённые моменты анимации. Браузер рассчитывает промежуточные значения автоматически.

Синтаксис

Ключевые кадры задаются в процентах от 0% до 100%. Можно также использовать ключевые слова from (= 0%) и to (= 100%).

@keyframes имя-анимации {
  0% {
    /* начальное состояние */
  }
  50% {
    /* середина */
  }
  100% {
    /* конечное состояние */
  }
}

Пример: движение по траектории

Элемент движется вправо вниз влево и возвращается:

@keyframes moveSquare {
  0%   { top: 10px; left: 10px; }
  25%  { top: 10px; left: calc(100% - 90px); }
  50%  { top: calc(100% - 90px); left: calc(100% - 90px); }
  75%  { top: calc(100% - 90px); left: 10px; }
  100% { top: 10px; left: 10px; }
}

.element {
  animation: moveSquare 3s ease-in-out infinite;
  position: absolute;
}