CSS-анимированные макеты сетки

Bramus

В CSS Grid свойства grid-template-columns и grid-template-rows позволяют определять имена строк и отслеживать размеры столбцов и строк сетки соответственно. Поддержка интерполяции для этих свойств позволяет макетам сетки плавно переходить между состояниями вместо привязки в середине анимации или перехода.

Интерполяция значений в CSS

В CSS вы можете плавно переходить свойства от одного значения к другому, используя свойство transition .

#target {
  opacity: 0.5;
  transition: opacity ease-in-out 0.25s;
}

#target:hover {
  opacity: 1;
}

Механизм рендеринга автоматически определит тип значения целевого свойства и будет использовать эту информацию для плавного перехода к новому значению.

Например:

• Переход opacity с 0 на 1 ? Это числовая интерполяция.
• Переход background-color с white на black ? Переход между исходным и целевым цветами.
• width перехода? Интерполируйте численно, при необходимости преобразуя единицы измерения.

То же самое относится и к CSS-анимации, где браузер выполняет интерполяцию значений между ключевыми кадрами.

Анимация grid-template-columns и grid-template-rows

Макеты сетки также могут плавно переходить между состояниями вместо привязки в середине анимации или перехода.

В следующей демонстрации в сетке показаны несколько аватаров. Чтобы сэкономить место, аватары располагаются друг над другом, ограничивая ширину каждого столбца с помощью grid-template-columns . При наведении курсора мыши каждому столбцу выделяется больше места.

.avatars {
  display: grid;
  gap: 0.35em;

  grid-auto-flow: column;
  grid-template-columns: repeat(4, 2em);
  transition: all ease-in-out 0.25s;
}

.avatars:hover {
  grid-template-columns: repeat(4, 4em);
}

При наличии свойства transition сетка плавно интерполирует значения.

Эффект также применяется к анимациям, которые изменяют значения grid-template-columns или grid-template-rows .