博文中针对进入和退出效果的四项全新 CSS 功能分享了一些仅在 Chrome 中推出的实用功能。现在，随着 Firefox 129 的发布，其中两项功能 @starting-style 和 transition-behavior: allow-discrete 变成了“Base New 可用”。您现在可以为元素创建进入动画效果，包括为 display: none 添加动画效果，以及为顶层添加动画效果。
使用 @starting-style 设置条目效果
@starting-style 规则用于定义元素在网页上呈现之前的初始样式。这对于从 display: none 以动画形式传入的元素而言是必需的，因为它们需要一个作为动画效果的起始状态。
像使用 CSS 中的任何其他 @ 规则一样，通过将元素的样式放置在 @starting-style 中，来使用 @starting-style。例如，使用 <dialog> 时，将 dialog[open] 样式放置在 @starting-style 规则中。这些是在打开对话框之前使用的样式。
@starting-style {
dialog[open] {
/* Styles before the dialog opens */
}
}
使用 allow-discrete 启用离散动画
对于通过 display: none 添加动画效果的元素（例如对话框和弹出式窗口）支持进入动画，其次需要启用新的动画模式，以支持离散属性的动画。离散属性是指无法在值之间插值的属性。您可以把它们想象成一个开/关开关。一些示例包括 display、visibility、mix-blend-mode，即特征为一个值或另一个值的任何属性。借助这一新的动画模式，浏览器现在支持在过渡点的 50% 处（而不是 0% 处）交换值。
您可以使用以下两种方法之一为 display: none 和 visibility: hidden 元素添加进入效果动画效果：
- 独立属性
transition-behavior，值为allow-discrete。 - 过渡效果简写中的
allow-discrete值。
我们推荐第二种方法，因为应用 transition-behavior 包含在 transition 简写形式中。如果您在应用转场、计时和加/减速函数的过渡简写形式之前应用 transition-behavior: allow-discrete，浏览器将忽略 transition-behavior。
如果在简写形式中使用此属性，您只需将 allow-discrete 关键字应用于需要离散动画的特定属性。以下 CSS 对此进行了演示，该 CSS 同时转换了 translate 属性和 display 属性，但仅将 allow-discrete 关键字应用于 display 属性。
transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
演示：综合应用
使用这些地图项对顶层元素特别有用，例如 <dialog> 元素或使用 popover 属性的组件。在以下示例中，<dialog> 元素从视口底部（最初从屏幕外的 100vh 垂直平移开始）到视口中心以动画形式呈现，在 <dialog> 打开时移除平移。
/* Before the dialog opens */
@starting-style {
dialog[open] {
translate: 0 100vh;
}
}
/* Dialog is-open state */
dialog[open] {
translate: 0 0;
transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
}
您可以使用 CSS 嵌套以更简洁的方式编写代码，这也是 Baseline 新推出的一项功能。
dialog[open] {
translate: 0 0;
transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
@starting-style {
translate: 0 100vh;
}
}
总结
看到 Baseline 中这样的进展令人兴奋，至少，这是对这些元素的渐进式增强。如果没有这些进入效果功能，为顶层或 display: none 样式添加动画效果的元素将直接显示在您的页面上，不会像现在一样进行过渡。
如需了解如何以渐进增强的方式添加退出效果，请参阅“四个新 CSS 功能可实现流畅的进入和退出动画”一文。如需详细了解这些功能，请参阅以下文档资源：