• Теория
  • Теория

@keyframes: группировка кадров

Ключевые кадры в keyframes можно группировать, для этого нужно перечислить их через запятую. Рассмотрим пример:

@keyframes stretching {
  0%,
  50% {
    width: 100px;
  }
  100% {
    width: 200px;
  }
}

В этом примере первые два кадра сгруппированы. Анимируемый элемент сначала изменит свою ширину до 100px и останется в этом состоянии половину времени анимации. А за вторую половину времени он растянется от 100px до 200px.

Хорошо владеете JavaScript, но до сих пор не освоили Node.js? Записывайтесь на профессиональный курс «Node.js. Профессиональная разработка REST API». Цена 12 000 ₽.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Анимация» тренажёра «Интерфейсные анимации» можно после регистрации и оформления подписки.