CSS 애니메이션 그리드 레이아웃

Bramus

CSS 그리드에서 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 값을 변경하는 애니메이션에도 적용됩니다.