CSS: @starting-style 새롭고 멋진 at-rule

@starting-style CSS at-rule은 요소가 첫 번째 스타일 업데이트를 받을 때, 즉 요소가 이전에 로드된 요소에 처음 표시될 때 전환하려는 요소에 설정된 속성의 시작 값을 정의하는 데 사용됩니다. 페이지.

토스트 메시지를 예로 들어보겠습니다. 사용자에게 표시하기 위해 가시성을 변경하지만 결과적으로는 즉시 표시됩니다. 이제 새로운 @starting-style 규칙을 사용하여 이 요소의 시작 애니메이션을 정의할 수 있습니다.

몇 가지 간단한 예

간단한 직사각형인 이 기본 HTML을 사용해 보겠습니다.

.container {
  width: 10rem;
  height: 10rem;
  background-color: hotpink;  
}

파란색에서 분홍색으로 초기 배경색 전환 추가

.container {
  ...
  transition: background-color 4s; 
}

@starting-style {
  .container {
    background-color: blue;
  }
}

이전 예에 회전 추가

.container {
  ...
  transition: transform 4s, background-color 4s;
  transform: rotate(0deg);} 
}

@starting-style {
  .container {
    background-color: blue;
    transform: rotate(360deg);
  }
}

어쨌든 이해가 되실 겁니다.
팝업과 메뉴에 애니메이션을 적용하거나 애니메이션 로고를 만드세요.
간단합니다.

메모

이 기능은 현재 제한적으로 제공됩니다.

위 내용은 CSS: @starting-style 새롭고 멋진 at-rule의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!