CSS @starting-style 규칙

定义和用法

CSS @starting-style 规则用于在元素获得其第一次样式更新之前定义元素的初始样式。

这可以用于为像弹出框、模态框或任何从 display: none 상태로可见 상태로 변하는 요소에 부드러운 진입 및 퇴장 트랜지션 효과를 생성합니다。

实例

例子 1

使用 @starting-style让盒子以透明度 0 开始，并从顶部落下：

.box {
  width: 150px;
  height: 150px;
  background-color: pink;
  opacity: 1;
  transition: all 0.9s ease;
  @starting-style {
    opacity: 0;
    translate: 0 -80px;
  }
}

본인이 직접 시도해 보세요

例子 2

弹出窗口和对话框中使用 @starting-style：

#myPopover {
  transition: opacity 0.5s ease-in, scale 0.5s ease-in;
  @starting-style {
    opacity: 0;
    scale: 1.1;
  }
}
#myDialog {
  transition: opacity 0.5s ease-in, scale 0.5s ease-in;
  @starting-style {
    opacity: 0;
    scale: 1.1;
  }
}

본인이 직접 시도해 보세요

CSS 문법

@starting-style {
  css 표현식;
}

브라우저 지원

표의 숫자는 해당 @ 규칙을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.