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 .5s ease-in, scale .5s ease-in;
  @starting-style {
    opacity: 0;
    scale: 1.1;
  }
}
#myDialog {
  transition: opacity .5s ease-in, scale .5s ease-in;
  @starting-style {
    opacity: 0;
    scale: 1.1;
  }
}

親自試一試

CSS 語法

@starting-style {
  css 聲明;
}

瀏覽器支持

表格中的數字表示首個完全支持該 @ 規則的瀏覽器版本。