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

Bramus

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

Browser Support

• 107
• 107
• 66
• 16

Интерполяция значений в 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, где браузер будет выполнять интерполяцию значений между ключевыми кадрами.

Примечание. При использовании дополнительных параметров указывайте их тип с помощью @property. Таким образом, браузер знает, как перейти от одного значения к другому.

Анимировать 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.