Grid: анимация

Анимация в Grid-раскладке — применение transition и @keyframes к grid-свойствам элементов и их содержимому для создания плавных изменений раскладки.

Зачем нужно

Анимация Grid-раскладки — мощный инструмент: reveal-эффекты галерей, расширяющиеся карточки, плавное переключение состояний дашборда. Некоторые grid-свойства анимируемы (например, grid-template-columns в Chrome 107+), большинство эффектов достигается анимацией transform и opacity на grid-элементах.

Где используется

  • Анимированное появление карточек при загрузке
  • Раскрывающаяся карточка в галерее
  • Плавное изменение размера sidebar
  • Staggered reveal (поочерёдное появление элементов)

Основной контент

Staggered reveal: поочерёдное появление

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.grid__item {
  animation: card-in 0.4s ease forwards;
  opacity: 0;
}

/* Задержка для каждого элемента */
.grid__item:nth-child(1)  { animation-delay: 0.0s; }
.grid__item:nth-child(2)  { animation-delay: 0.1s; }
.grid__item:nth-child(3)  { animation-delay: 0.2s; }
.grid__item:nth-child(4)  { animation-delay: 0.3s; }
.grid__item:nth-child(5)  { animation-delay: 0.4s; }
.grid__item:nth-child(6)  { animation-delay: 0.5s; }

Расширяющаяся карточка (grid-column)

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.gallery__item {
  transition: grid-column 0.3s ease, transform 0.3s ease;
  /* grid-column анимируется в Chrome 107+ */
}

.gallery__item.expanded {
  grid-column: span 2;
  transform: scale(1.02);
}

Плавное изменение размера sidebar через CSS переменную

:root { --sidebar-width: 240px; }

.layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  transition: grid-template-columns 0.3s ease;
}

.layout.collapsed {
  --sidebar-width: 60px;
}

Hover на grid-элементе

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.card-grid__item {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-grid__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

Анимация через JavaScript (класс)

// Добавить класс на каждый элемент с задержкой
document.querySelectorAll('.grid__item').forEach((item, i) => {
  item.style.animationDelay = `${i * 0.1}s`;
  item.classList.add('animate-in');
});

Частые ошибки

  • grid-template-columns не анимируется в Safari — переходы grid-template-columns поддерживаются только в Chrome 107+; для Safari используйте transform
  • Анимация grid-area — именованные области нельзя анимировать; переключайте классы с transition: transform
  • animation-fill-mode забыт — без forwards элемент возвращается в начальное (прозрачное) состояние

Связанные темы

Ресурсы