CSS @starting-style 规则

文章正文
发布时间:2025-03-15 00:42

CSS @starting-style 规矩 界说和用法

CSS @starting-style 规矩用于正在元素与得其第一次花式更新之前界说元素的初始花式。

那可以用于为像弹出框、模态框或任何从 display: none 形态变成可见形态的元素创立滑腻的进入和退出过渡成效。

真例 例子 1

运用 @starting-style让盒子以通明度 0 初步,并从顶部落下:

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

亲身试一试

例子 2

正在弹出框和对话框中运用 @starting-style:

#myPopoZZZer { 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 声明; } 阅读器撑持

表格中的数字默示首个彻底撑持该 @ 规矩的阅读器版原。

Chrome Edge FirefoV Safari Opera
117   117   129   17.5   103