Scroll-Driven corner-shape 动画实验

Over the last few years, there’s been a lot of talk about and experimentation with scroll-driven animations. It’s a very shiny feature for sure, and as soon as it’s supported in Firefox (without a flag), it’ll be baseline. It’s part of Interop 2026, so that should be relatively soon. Essentially, scroll-driven animations tie an animation timeline’s position to a scroll position, so if you were 50% scrolled then you’d also be 50% into the animation, and they’re surprisingly easy to set up too.

过去几年，有很多关于和实验 scroll-driven animations 的讨论。它确实是一个非常闪亮的功能，一旦在 Firefox（无需标志）中支持，它就会成为基线。它是 Interop 2026 的一部分，因此应该相对较快实现。本质上，scroll-driven animations 将animation timeline 的位置与scroll position绑定，因此如果你滚动了 50%，动画也会进行到 50%，而且设置起来出奇地简单。

I’ve been seeing significant interest in the new CSS [corner-shape](https://css-tricks.com/almanac/properties/c/corner-shape/) property as well, even though it only works in Chrome for now. This enables us to create corners that aren’t as rounded, or aren’t even rounded at all, allowing for some intriguing shapes that take little-to-no effort to create. What’s even more intriguing though is that corner-shape is mathematical, so it’s easily animated.

我已经看到对新的 CSS [corner-shape](https://css-tricks.com/almanac/properties/c/corner-shape/) 属性的极大兴趣，尽管它目前仅在 Chrome 中工作。这使我们能够创建不那么圆润的角，甚至完全不圆润的角，从而以几乎无需努力的方式创建一些 引人入胜的形状。不过更引人入胜的是，corner-shape 是数学的，因此很容易动画化。

Hence, say hello to scroll-driven corner-shape animations (requires Chrome 139+ to work fully):

因此，向滚动手corner-shape动画问好（需要 Chrome 139+ 才能完全工作）：

corner-shape in a nutshell

corner-shape 简而言之

Real quick — the different values for corner-shape:

快速地说 — corner-shape 的不同值：