这三个特性都是 2024 年之后的新特性，对于优化 CSS 代码帮助莫大，下文分别介绍的是它们的部分用处。

interpolate-size

:root {
    interpolate-size: allow-keywords;
}

这句 CSS 规则声明了启用对关键字属性的过渡效果，于是你可以直接从比如 height: 0 过渡到 height: auto，在这之前它们是不能直接过渡的，只能通过数字到数字的方式。

这里有一个相似的 CSS 新函数，也可以在不启用该声明时使用 height: calc-size(auto) 完成过渡。

transition-behavior

在写了 transition-behavior: allow-discrete 后，离散属性也能被过渡，比如 display.

<style>
    .this {
        display: block;
        opacity: 1;
        transition-behavior: allow-discrete;
    }
    .hided {
        display: none;
        opacity: 0;
    }
</style>
<div class="this">CONTENT</div>
<button onclick="document.querySelector('this').classList.toggle('hided')"></button>

这时，在加上类 hided 时，CONTENT 会有一个淡出效果，但仍然没有淡入效果。

这时可以添加新的 @starting-style 规则定义该元素样式改变时，该从什么初始属性过渡：

@starting-style {
    .this {
        opacity: 0;
    }
}

这样，就不用担心以前使用元素过渡时，不能添加 display: none 规则的问题了。

* Total words: 305