@keyframes - Правила для анимации

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

@keyframes привязывается к стилю через имя анимации.

Пример keyframes:

@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

Внимание! есть несколько особенностей.

1. Игнорирование в ключевых кадрах !important:

@keyframes important1 {
  from { margin-top: 50px; }
  50%  { margin-top: 150px !important; } /* ignored */
  to   { margin-top: 100px; }
}

2. В каждом ключевом кадре должны быть все свойства (Вот так не правильно!):

@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

3. Если в  анимации только 2 ключевых кадра то можно записать так:

@keyframes slidein {
  from {margin-left: 100%;}
  to {margin-left: 0%;}
}