이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Now in Baseline: 항목 효과 애니메이션

Una Kravets

진입 및 종료 효과를 위한 4가지 새로운 CSS 기능 게시물에서는 Chrome에 추가된 유용한 기능을 소개했습니다. 이제 이러한 두 가지 기능인 @starting-style과 transition-behavior: allow-discrete가 Firefox 129 출시와 함께 새로 사용 가능한 기준이 되었습니다. 이제 display: none에서 애니메이션을 적용하고 상단 레이어에 애니메이션을 적용하는 요소를 비롯한 요소의 항목 애니메이션 효과를 만들 수 있습니다.

`@starting-style`로 항목 효과 설정

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

@starting-style 규칙은 요소가 페이지에 렌더링되기 전에 요소의 초기 스타일을 정의합니다. display: none에서 애니메이션으로 표시되는 요소에는 애니메이션을 적용할 상태가 필요하므로 이 속성이 필요합니다.

CSS 내에 요소의 스타일을 배치하여 CSS의 다른 at-rule과 같이 @starting-style를 사용합니다. 예를 들어 <dialog>를 사용하면 dialog[open] 스타일을 @starting-style 규칙 내에 배치합니다. 다음은 대화상자가 열리기 전에 사용되는 스타일입니다.

@starting-style {
  dialog[open] {
    /*   Styles before the dialog opens   */
  }
}

`allow-discrete`로 개별 애니메이션 사용 설정

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

display: none에서 애니메이션되는 요소(예: 대화상자 및 팝오버)의 항목 애니메이션을 지원하는 데 필요한 두 번째로 필요한 것은 새 애니메이션 모드를 사용 설정하여 개별 속성의 애니메이션을 지원하는 것입니다. 불연속 속성은 값 사이에 보간할 수 없는 속성입니다. 이를 켜기/끄기 스위치라고 생각하면 됩니다. display, visibility, mix-blend-mode(특성이 하나의 값 또는 다른 값인 속성)을 예로 들 수 있습니다. 이 새로운 애니메이션 모드를 사용하면 브라우저에서 전환의 0% 지점이 아닌 50% 지점에서 값을 전환할 수 있습니다.

다음 두 가지 방법 중 하나를 사용하여 display: none 및 visibility: hidden 요소의 항목 효과에 애니메이션을 적용합니다.

값이 allow-discrete인 독립형 속성 transition-behavior
전환 약식의 allow-discrete 값입니다.

transition-behavior 적용이 transition 약식에 포함되어 있으므로 두 번째 메서드를 사용하는 것이 좋습니다. 전환, 타이밍 및 이징 함수를 적용하는 전환 약칭 전에 transition-behavior: allow-discrete를 적용하면 브라우저에서 transition-behavior를 무시합니다.

이를 약식으로 사용하는 경우 개별 애니메이션이 필요한 특정 속성에만 allow-discrete 키워드를 적용하면 됩니다. 이는 translate 속성과 display 속성을 모두 전환하지만 allow-discrete 키워드만 display 속성에 적용하는 다음 CSS에서 확인할 수 있습니다.

transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

데모: 총정리

이러한 기능을 사용하면 <dialog> 요소와 같은 최상위 레이어 요소 또는 popover 속성을 사용하는 구성요소에 특히 유용합니다. 다음 예에서 <dialog> 요소는 표시 영역 하단에서 (처음에는 화면 밖의 100vh 수직 변환에서 시작) 표시 영역의 중앙으로 애니메이션 처리되어 <dialog>가 열려 있을 때 변환이 삭제됩니다.

/* Before the dialog opens */
@starting-style {
  dialog[open] {
  translate: 0 100vh;
  }
}

/* Dialog is-open state */
dialog[open] {
  translate: 0 0;
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
}

이 코드는 새로 제공되는 기준 기능인 CSS 중첩을 사용하여 더 간결하게 작성할 수 있습니다.

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

dialog[open] {
  translate: 0 0;
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

  @starting-style {
    translate: 0 100vh;
  }
}

드림 <ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">를 통해 개인정보처리방침을 정의할 수 있습니다.

대화상자 요소에서 애니메이션 데모를 실행합니다.

결론

기준에서 이와 같은 발전이 이루어지고 있다는 것은 흥미진진한 일이며, 적어도 이러한 요소에 대한 상당한 점진적 개선이라고 할 수 있습니다. 이러한 항목 효과 기능이 없으면 상단 레이어 또는 display: none 스타일에서 애니메이션이 적용되는 요소가 지금과 마찬가지로 전환 없이 페이지에 표시됩니다.

이탈 효과를 점진적으로 개선하는 방법을 알아보려면 '원활한 시작 및 종료 애니메이션을 위한 4가지 새로운 CSS 기능' 도움말을 확인하고, 이러한 기능에 대해 자세히 알아보려면 다음 문서 리소스를 확인하세요.

Now in Baseline: 항목 효과 애니메이션

@starting-style로 항목 효과 설정

allow-discrete로 개별 애니메이션 사용 설정

데모: 총정리

결론

`@starting-style`로 항목 효과 설정

`allow-discrete`로 개별 애니메이션 사용 설정