@starting-style로 진입 애니메이션 단순화

부드러운 진입 애니메이션을 만드는 것은 어려울 수 있습니다. DOM 로드 시간과 display: none 애니메이션의 복잡성으로 인해 실망스러운 결과를 초래하는 경우가 많습니다. @starting-style 규칙은 요소가 처음 나타날 때 CSS 속성의 초기 값을 명시적으로 정의하여 처음부터 원활한 전환을 보장함으로써 효율적인 솔루션을 제공합니다.

더 많은 예시가 포함된 전체 기사를 여기에서 살펴보세요.

---

기본의 이해

@starting-style은 요소가 표시되기 전 CSS 속성의 초기 상태, 즉 '전' 상태를 설정합니다. "이후" 상태는 표준 CSS 규칙에 정의되어 있습니다. 작동 방식은 다음과 같습니다.

element {
  transition: opacity 0.5s ease-in;
  opacity: 1;

  @starting-style {
    opacity: 0;
  }
}

초기 로드 시 @starting-style는 요소의 불투명도를 0으로 설정합니다. 그런 다음 최종 상태(이 경우 불투명도: 1)로 부드럽게 전환됩니다. 이 기능은 요소가 display: none에서 표시로 전환될 때도 적용되므로 토글된 요소에 애니메이션을 적용하는 데 적합합니다.

활용@starting-style

@starting-style을 두 가지 방법으로 적용할 수 있습니다. 즉, 요소의 규칙 세트 내에 중첩되거나(선택기가 필요 없음) 선택기로 별도로 정의할 수 있습니다.

중요 사항: 의사 요소(예: @starting-style 또는 ::before) 내에 ::after를 중첩하면 의도한 대로 작동하지 않습니다. 스타일은 의사 요소가 아닌 상위 요소에 영향을 미칩니다.

/* Standalone */
@starting-style {
  element {
    opacity: 0;
  }
}

element {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}

/* Nested */
element {
  opacity: 1;
  transition: opacity 0.5s ease-in;

  @starting-style {
    opacity: 0;
  }
}

주요 고려 사항: @starting-style과 "원래 규칙"은 동일한 특이성을 갖습니다. 안정적인 적용을 위해 항상 "원래 규칙"@starting-style 뒤에 at 규칙을뒤에

배치하세요.

실용적 적용

@starting-style 진입 효과와 전환을 만드는 데 탁월합니다. 페이지 로드 시 텍스트가 페이드 인되거나 팝업 및 대화 상자에 애니메이션을 적용하는 데 사용하는 것을 고려해 보세요. 다음은 몇 가지 예입니다.

display: none

의 애니메이션

@starting-style의 주요 이점은 처음에 숨겨진 요소, 특히 display: none에서 전환되는 요소에 대해 부드러운 전환을 만드는 기능입니다. @starting-style이 없으면 정의된 시작 상태가 없기 때문에 이 전환에 애니메이션을 적용하기가 어렵습니다. @starting-style은 초기 상태를 제공하여 이 문제를 해결합니다.

dialog 요소는 명확한 설명을 제공합니다. 본문은 display: none과 display: block 사이를 전환합니다. 일반적으로 display 속성 변경으로 인해 애니메이션을 적용할 수 없지만 @starting-style을 사용하면 가능합니다.

페이지 로드 시 페이드 및 슬라이딩

이 예에서 @starting-style는 두 요소 모두에 대한 "이전" 상태를 정의합니다. 페이드 효과는 초기 불투명도를 0으로 설정하는 반면 슬라이드 효과는 왼쪽 이동을 사용합니다.

---

이 글은 참가작 애니메이션에 초점을 맞췄습니다. 종료 효과는 @starting-style에서 처리되지 않습니다. 엑시트 애니메이션의 경우 다른 토론 주제인 transition-behavior을 탐색해야 합니다.

전체 기사를 여기 읽어보세요. 제 블로그 여기를 방문해 보세요.

위 내용은 @starting-style로 진입 애니메이션 단순화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!