집 > 기사 > 웹 프론트엔드 > 표시 및 크기 속성을 사용하여 CSS 애니메이션 단순화

표시 및 크기 속성을 사용하여 CSS 애니메이션 단순화

DDD원래의: 2024-10-31 05:58:02512검색

작가: Saleh Mubashar✏️

최근까지는 제한된 수의 CSS 속성만 애니메이션으로 만들 수 있었습니다. 예를 들어, 페이드 인 또는 페이드 아웃 효과를 만들려면 일반적으로 디스플레이 속성 대신 불투명도 속성을 사용합니다. 후자는 애니메이션을 적용할 수 없기 때문입니다. 그러나 문제는 요소가 시각적으로 숨겨지더라도 페이지에는 여전히 존재한다는 것입니다.

최근 Chrome에서는 이 문제를 해결하고 개발 프로세스를 훨씬 단순하게 만드는 새로운 기능을 도입했습니다. 이 문서에서는 이러한 새로운 기능을 사용하여 디스플레이 및 크기 속성에 애니메이션을 적용하는 기존 방법을 비교해 보겠습니다.

디스플레이 및 요소 크기 애니메이션 문제

어느 시점에서 CSS를 사용하여 일부 요소에 페이드 인/아웃 효과를 만들어야 했을 가능성이 있습니다. 이동 방법은 요소의 불투명도에 애니메이션이나 전환을 적용하는 것입니다. 하지만 불투명도를 0으로 설정한다고 해서 요소가 실제로 제거되는 것은 아닙니다. 단지 요소가 보이지 않게 되는 것뿐입니다. 대부분의 경우, 그것으로 충분합니다.

하지만 사용자가 항목을 삭제할 수 있는 할 일 목록이 있다고 가정해 보겠습니다. 항목이 페이드 아웃되도록 종료 애니메이션을 생성하려면 일반적으로 불투명도를 사용합니다. 그러나 목록의 높이를 조정해야 하는 경우 표시를 없음으로 설정해야 합니다. 여기서 문제는 항목이 시각적으로 사라지더라도 여전히 DOM에서 공간을 차지하고 레이아웃 및 사용자 상호 작용과 같은 작업을 망친다는 것입니다.

다음은 두 가지 접근 방식을 나란히 비교한 것입니다. 하나는 불투명도만 사용하는 것이고 다른 하나는 불투명도와 디스플레이를 결합하는 것입니다. 아래 예를 통해 차이점을 확인해 보세요.

CodePen에서 Saleh-Mubashar(@saleh-mubashar)의 Pen Simple Todo 앱 비교를 확인하세요.

디스플레이와 불투명도를 결합하면 레이아웃이 어떻게 바뀌는지 확인하세요. 반면 불투명도만 사용하면 목록에 공백이 남습니다. 두 번째 방법(불투명도 표시)은 레이아웃 문제를 해결하지만 페이드가 끝나기 전에는 아무 것도 적용되지 않기 때문에 부드러운 페이드 아웃 효과를 방해합니다. 이로 인해 점진적인 퇴색이 아닌 갑작스러운 소멸이 발생합니다.

예를 들어 불투명도 속성은 0에서 1로 원활하게 전환할 수 있습니다. 그러나 표시 속성에는 숫자 범위가 없기 때문에 애니메이션을 적용할 수 없습니다. 해당 상태는 없음, 블록 또는 기타 값과 같은 이진입니다. 중간 값이 없기 때문에 CSS는 디스플레이에 애니메이션을 적용할 수 없습니다.

마찬가지로 개발자는 height:auto와 같이 요소의 고유 크기를 애니메이션화하려고 할 때 종종 문제에 직면합니다. 이는 닫힐 때 높이가 0px에서 시작하고 열 때 내용에 맞게 확장되는 아코디언과 같은 접을 수 있는 섹션의 전환에 일반적으로 사용됩니다. 높이와 같은 크기 속성은 일반적으로 애니메이션을 적용할 수 있지만(숫자 시작 및 종료 값이 있기 때문에) 자동 애니메이션을 사용하거나 자동으로 애니메이션을 적용하면 문제가 발생합니다. 브라우저는 0px와 auto 사이의 단계를 계산할 수 없습니다. 따라서 복잡한 해결 방법을 사용해야 합니다.

디스플레이 및 크기 애니메이션을 위한 기존 솔루션

디스플레이 및 요소 크기 애니메이션 문제를 해결하는 방법에는 여러 가지가 있습니다. 이 섹션에서는 CSS와 JavaScript를 모두 사용하는 가장 인기 있는 솔루션에 대해 논의하겠습니다.

CSS 기반 솔루션

CSS를 사용하여 디스플레이 속성에 애니메이션을 적용할 수 없는 문제를 해결하는 방법에는 두 가지가 있습니다. 가장 신뢰할 수 있는 방법은 높이나 너비와 같은 크기 속성과 함께 불투명도를 사용하는 것입니다. 이 경우 크기 속성은 DOM에서 요소를 효과적으로 제거하는 데 사용됩니다. 이는 전환 지연 속성을 사용하여 수행할 수 있습니다. 기본적으로 불투명도 전환에 대해 설정된 시간과 동일한 크기 전환에 지연을 추가합니다. 요소가 페이드 아웃되면 해당 크기는 즉시 0으로 설정되어 마치 display: none이 적용된 것처럼 레이아웃에서 효과적으로 제거됩니다.

할 일 목록을 다시 예로 사용하면 구현은 다음과 같습니다.

li {
  height: 50px; /* any measurable value, not "auto" */
  opacity: 1;
  transition: height 0ms 0ms, opacity 400ms 0ms;
}
.fade-out {
  overflow: hidden; /* Hide the element content, while height = 0 */
  height: 0;
  opacity: 0;
  padding: 0;
  transition: height 0ms 400ms, padding 0ms 400ms, opacity 400ms 0ms;
}

여기서 불투명도가 0으로 사라지면 지연 후 높이와 패딩을 0으로 설정하는 것이 요령입니다. 지연과 불투명도의 길이는 동일해야 합니다(이 경우 400ms). height: 0은 목록 항목이 레이아웃과 상호 작용하지 않도록 합니다. 앞에서 설명한 것처럼 height: auto는 콘텐츠에 따라 동적으로 조정됩니다. 따라서 애니메이션을 적용할 수 없습니다. 따라서 애니메이션이 제대로 작동하려면 요소에 특정한 고정 높이가 있는지 확인해야 합니다.

공개 상태를 숨김으로 설정하는 것도 일반적으로 사용되는 또 다른 방법입니다. 그러나 이는 DOM에서 요소를 제거하지 않으며 여전히 정상적으로 레이아웃에 영향을 줍니다. 즉, 주변 요소의 위치에 영향을 줍니다.

요소의 고유 크기(또는 높이: 자동)에 애니메이션을 적용하는 가장 일반적인 CSS 솔루션은 높이 대신 max-height를 사용하는 것입니다. 가장 깔끔한 구현은 아니지만 작업이 완료됩니다. 기본적으로 최대 높이를 요소가 얻을 수 있는 것보다 큰 값으로 설정합니다. 이런 방식으로 고정된 높이에 애니메이션을 적용하는 것과 유사한 부드러운 전환을 모방합니다.

.collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.collapsible.open {
  max-height: 500px;
}

이 접근 방식의 가장 명백한 단점은 최대 높이가 요소 내부의 실제 콘텐츠보다 항상 커야 한다는 것입니다. 또 다른 문제는 콘텐츠 높이가 최대 높이 값과 완벽하게 일치하지 않으면 전환 타이밍이 부정확하게 느껴질 수 있다는 것입니다.

콘텐츠 높이가 400px인데 최대 높이를 1000px로 설정했다고 가정해 보겠습니다. 애니메이션은 기술적으로 전체 기간(2초라고 가정) 동안 계속됩니다. 그러나 시각적으로 요소는 콘텐츠의 실제 높이(400px)에 도달하자마자 성장을 멈추고 최대 높이는 계속 1000px로 전환됩니다. 따라서 이 경우 전환 기간은 지정한 기간보다 짧아집니다.

자바스크립트 메소드

위에서 논의한 모든 CSS 솔루션은 매우 복잡하며 예측할 수 없는 결과를 초래할 수 있습니다. 최근까지 이를 달성하는 가장 안정적인 방법은 JavaScript를 이용하는 것이었습니다.

불투명도 전환 후 디스플레이 없음을 적용하려면 setInterval 또는 setTimeout 함수를 사용하여 불투명도 전환 기간과 일치하는 지연을 추가할 수 있습니다. 이 지연 후에는 표시를 없음으로 설정할 수 있습니다. 예는 다음과 같습니다.

li {
  height: 50px; /* any measurable value, not "auto" */
  opacity: 1;
  transition: height 0ms 0ms, opacity 400ms 0ms;
}
.fade-out {
  overflow: hidden; /* Hide the element content, while height = 0 */
  height: 0;
  opacity: 0;
  padding: 0;
  transition: height 0ms 400ms, padding 0ms 400ms, opacity 400ms 0ms;
}

이 코드에서는 버튼을 클릭한 후 요소가 1초에 걸쳐 페이드 아웃되고 해당 표시가 즉시 없음으로 설정됩니다. 즉, 기본적으로 레이아웃에서 요소가 제거됩니다.

마찬가지로 고유 크기에 애니메이션을 적용하기 위해 JavaScript에서 요소의 높이를 계산하고 해당 값을 높이의 끝점으로 사용할 수 있습니다. 이 접근 방식은 훨씬 더 안정적이고 정확합니다. 그러나 우리는 여전히 height 속성에 애니메이션을 적용하고 있다는 점을 명심하세요.

여기서 분명한 이점은 요소의 실제 콘텐츠를 기반으로 높이를 동적으로 설정하여 최대 높이로 추측하는 대신 전환이 실제 높이와 일치하도록 한다는 것입니다.

방법은 다음과 같습니다.

.collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.collapsible.open {
  max-height: 500px;
}

이 예에서는 높이가 0으로 시작하는 섹션을 확장합니다. scrollHeight를 사용하여 콘텐츠의 전체 높이를 파악하고 이를 전환의 끝점으로 사용합니다. 전환이 완료된 후 높이를 자동으로 전환합니다. 그러면 브라우저가 콘텐츠에 따라 컨테이너 높이를 자동으로 조정할 수 있습니다. 이 단계는 선택 사항이지만 시간이 지남에 따라 컨테이너 내부의 콘텐츠가 변경될 것으로 예상되는 경우 유용합니다.

디스플레이 및 고유 크기 속성에 애니메이션을 적용하기 위한 새로운 CSS 기능

이제 최근에 출시되었거나 브라우저에 출시될 예정인 새로운 CSS 기능을 살펴보겠습니다. 이러한 새로운 도구는 앞서 논의한 시나리오에서 JavaScript가 필요하지 않으며 더 깔끔하고 짧은 CSS를 작성하는 데 도움이 됩니다.

디스플레이 및 키프레임

@keyframes at-규칙을 사용하면 애니메이션 시퀀스의 중간 단계를 제어하여 애니메이션을 만들 수 있습니다. 최신 업데이트를 사용하면 키프레임 타임라인 내에서 디스플레이 및 [content-visibility](https://blog.logrocket.com/using-css-content-visibility-boost-rendering-performance/) 속성에 애니메이션을 적용할 수 있습니다.

display none과 block 사이를 정확하게 보간하지는 않습니다(왜냐하면 불가능하기 때문입니다). 대신 다른 모든 효과가 완료될 때까지 기다린 다음 표시 상태를 전환합니다. 이는 JavaScript로 수행한 작업(display: none을 적용하기 전에 전환이 완료될 때까지 기다리는 것)과 유사하지만 이제 CSS를 사용하면 훨씬 더 쉽습니다.

Chrome 개발자 블로그에는 상황을 명확하게 해주는 정말 멋진 데모가 있습니다.

CodePen에서 web.dev(@web-dot-dev)가 제작한 펜 페이드 아웃 카드 - 애니메이션을 확인하세요.

먼저 250ms 이상에서는 불투명도를 0으로 설정합니다. 이 시퀀스가 완료되면 표시가 즉시 없음으로 설정됩니다.

li {
  height: 50px; /* any measurable value, not "auto" */
  opacity: 1;
  transition: height 0ms 0ms, opacity 400ms 0ms;
}
.fade-out {
  overflow: hidden; /* Hide the element content, while height = 0 */
  height: 0;
  opacity: 0;
  padding: 0;
  transition: height 0ms 400ms, padding 0ms 400ms, opacity 400ms 0ms;
}

여기서 가장 큰 장점은 최근까지 CSS(또는 JavaScript)를 사용하여 구현하기가 매우 어려웠던 디스플레이 속성과 관련된 더 복잡한 애니메이션을 이제 비교적 쉽게 만들 수 있다는 것입니다.

전환 동작이 디스플레이 전환을 단순화하는 방법

이제 새로운 [transition-behavior](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior) 속성을 사용하여 전환으로 페이드 아웃 효과를 생성할 수도 있습니다. . 이를 통해 디스플레이와 같은 개별 애니메이션 동작이 있는 속성에 전환을 적용할 수 있습니다. Allow-discrete를 사용하면 표시 속성에 애니메이션을 적용할 수 있습니다. 간단한 예는 다음과 같습니다.

.collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.collapsible.open {
  max-height: 500px;
}

@starting 스타일을 사용한 진입 애니메이션

이 기사에서는 페이드 아웃 효과에 대해 상당히 광범위하게 논의했습니다. 하지만 그 반대의 경우는 어떨까요? 진입 애니메이션은 까다로우며 종종 JavaScript를 통해서만 가능합니다. 새로운 @starting 스타일 at-rule을 사용하면 작업이 훨씬 쉬워집니다.

이름에서 알 수 있듯이 요소가 페이지에 표시되기 전에 브라우저가 검색할 수 있는 스타일을 요소에 적용하는 데 사용할 수 있습니다. 여기서 진입 애니메이션의 초기 상태를 설정할 수 있습니다. 요소가 렌더링되면 기본 상태로 다시 전환됩니다.

기본적인 예는 다음과 같습니다.

document.getElementById("fadeButton").addEventListener("click", function () {
  const element = document.getElementById("myElement");
  element.style.opacity = "0";
  setTimeout(() => {
    element.style.display = "none";
  }, 1000); // Match this value with the duration in CSS
});

DOM이 로드되면 카드가 페이드 인됩니다. 모든 종류의 진입 애니메이션에 @starting-style을 사용할 수 있습니다. Chrome Dev 팀의 또 다른 멋진 예는 다음과 같습니다.

_CodePen에서 web.dev(@web-dot-dev)가 작성한 펜 항목 전환을 확인하세요.
_

calc-size() 함수를 사용하여 고유 크기 애니메이션

calc()와 유사한 calc-size 함수는 최근 Chrome 129에 도입되었습니다. 간단히 말해서 이 함수를 사용하면 고유 크기에 대해 안전하고 안정적인 방식으로 수학을 수행할 수 있습니다. 현재는 auto, min-content, max-content, fit-content 등 4가지 키워드의 연산을 지원합니다.

이 기능은 요소의 고유 크기에 애니메이션을 적용하는 데 특히 유용합니다. calc-size를 사용하면 현재 CSS에서 지정할 수 있는 모든 높이를 0으로 또는 작은 고정 값으로 애니메이션화할 수 있습니다. 다음은 높이: 0에서 자동:
으로 축소 가능한 섹션을 확장하는 간단한 예입니다.

li {
  height: 50px; /* any measurable value, not "auto" */
  opacity: 1;
  transition: height 0ms 0ms, opacity 400ms 0ms;
}
.fade-out {
  overflow: hidden; /* Hide the element content, while height = 0 */
  height: 0;
  opacity: 0;
  padding: 0;
  transition: height 0ms 400ms, padding 0ms 400ms, opacity 400ms 0ms;
}

브라우저 호환성

이러한 기능의 대부분은 기본적으로 필수 DOM 구성 요소가 아닌 애니메이션 향상을 위한 것이지만 상대적으로 새로운 기능이므로 브라우저 호환성을 확인해 볼 가치가 있습니다.

디스플레이 속성은 Chrome 116 및 Opera 102에서 @keyframe 애니메이션을 적용할 수 있습니다. Firefox 지원은 아직 개발 중이며 Safari도 이에 대해 작업 중입니다
[transition-behavior](https://caniuse.com/mdn-css_properties_transition-behavior) 속성은 Chrome 117에서 처음 출시되었습니다. 현재 개발 중인 Firefox를 제외한 모든 주요 브라우저와 호환됩니다
[@starting-style](https://caniuse.com/mdn-css_at-rules_starting-style) at-rule은 Chrome 117에서 도입되었습니다. Firefox를 제외한 모든 주요 브라우저에서 완전히 지원됩니다. 아직 디스플레이 애니메이션을 지원하지 않습니다: 없음
calc-size()는 Chrome 129에 도입된 최신 기능이며 현재 Chrome 및 Edge에서만 지원됩니다. 하지만 다른 주요 브라우저에서도 곧 지원할 예정입니다

결론

이 기사에서는 디스플레이 및 요소 크기와 같은 CSS 속성에 애니메이션을 적용할 때 개발자가 직면하는 문제를 살펴보았습니다. 기존 방법에서는 직접 애니메이션을 적용할 수 없는 속성에 대한 애니메이션을 구현하려면 CSS 및 JavaScript를 사용한 복잡한 해결 방법이 필요했습니다.

키프레임을 사용한 디스플레이 애니메이션, calc-size() 함수 및 전환 동작 속성과 같은 새로운 기능을 사용하면 이러한 애니메이션을 더 쉽게 구현할 수 있습니다. 이러한 기능을 사용하면 JavaScript가 필요하지 않으므로 CSS 애니메이션이 더 간단해집니다.

프런트엔드가 사용자의 CPU를 많이 사용하고 있나요?

웹 프런트엔드가 점점 더 복잡해짐에 따라 리소스를 많이 사용하는 기능으로 인해 브라우저에서 점점 더 많은 것을 요구하게 됩니다. 프로덕션에 있는 모든 사용자의 클라이언트측 CPU 사용량, 메모리 사용량 등을 모니터링하고 추적하는 데 관심이 있다면 LogRocket을 사용해 보세요.

Simplifying CSS animations with the display and size properties

LogRocket은 웹 앱, 모바일 앱 또는 웹사이트에서 일어나는 모든 일을 기록하는 웹 및 모바일 앱용 DVR과 같습니다. 문제가 발생한 이유를 추측하는 대신 주요 프런트엔드 성능 지표를 집계 및 보고하고, 애플리케이션 상태와 함께 사용자 세션을 재생하고, 네트워크 요청을 기록하고, 모든 오류를 자동으로 표시할 수 있습니다.

웹 및 모바일 앱 디버깅 방법을 현대화하고 무료로 모니터링을 시작해 보세요.

위 내용은 표시 및 크기 속성을 사용하여 CSS 애니메이션 단순화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：Chrome에서 페이지 로드 시 CSS 전환으로 인해 깜박이는 이유는 무엇입니까?다음 기사：Chrome에서 페이지 로드 시 CSS 전환으로 인해 깜박이는 이유는 무엇입니까?