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 声明;
}

浏览器支持

表格中的数字表示首个完全支持该 @ 规则的浏览器版本。