现代 Web 中，在页面之间跳转对内容增加动画并不少见。

比如，我在「手记」中在页面中切换中加入了纸张划出的效果。

页面动画的时间控制在 500ms 之内，既不会感觉很慢也不会很快。

因为我需要使用 Spring 动画去拟合一个更加真实的动画，使用了 Framer Motion 去制作动画。

页面过度动画非常好用，有效避免了切换内容时的突兀感。

很快我注意到，如果过渡效果出现在页面第一次进入时，会变得非常奇怪。也许这个动画应该消失，因为用户第一次进入页面也许只想更快的看到内容，而不是动画，和动画之后才会呈现的完整内容。

下面的例子也许更加明显感觉到缓慢。尤其是如果 JS 加载缓慢，这个动画效果还会推迟的更久，而此期间你将看不到任何内容，这个体验是非常糟糕的。

现在我们对其优化，这样是不是好多了。

嗯，看上去快多了，也有效提升了 LCP。

动画整挺好，还是用在合适的地方最好。滥用的动画也许只会让它看起来更慢。

资源

关于动画，收集了以下的参考资源：

• https://developer.apple.com/videos/play/wwdc2023/10158?time=96
• https://animations.dev/learn/making-it-feel-right/timing-and-purpose
• https://blog.maximeheckel.com/posts/the-physics-behind-spring-animations/
• https://animations.dev/learn/making-it-feel-right/spring-animations