原生CSS中的弹簧和弹跳

When creating animations, we can decide how to transition between states using a timing function. Historically, we’ve used Bézier curves for this, which provide us with a range of different options:

在创建动画时，我们可以决定如何使用 时间函数 在状态之间过渡。历史上，我们使用贝塞尔曲线来实现这一点，它为我们提供了一系列不同的选项：

In this demo, each of these circles moves from side to side over the same duration, but they’re interpolated very differently. This can dramatically change how the animation feels.

在这个演示中，这些圆圈在相同的持续时间内从一侧移动到另一侧，但它们被插值得非常不同。这可以显著改变动画的感觉。

Bézier curves are great, but there are certain things they just can’t do. For example:

贝塞尔曲线很好，但有些事情它们就是做不到。例如：

In the past, we’ve needed to rely on JavaScript libraries to provide these sorts of interpolations, which introduces a whole bunch of trade-offs; most JavaScript animations run on the main thread, for example, which means they won’t run smoothly if other stuff is happening in our application!

过去，我们需要依赖 JavaScript 库来提供这些插值，这引入了一系列权衡；例如，大多数 JavaScript 动画在主线程上运行，这意味着如果我们的应用程序中发生其他事情，它们就不会平稳运行！

Fortunately, modern CSS has provided us a new tool that enables us to create springs, bounces, and so much more all in native CSS: the linear() timing function. In this blog post, I’ll show you how it works, and share some tools you can use to get started right away!

幸运的是，现代 CSS 为我们提供了一种新工具，使我们能够在原生 CSS 中创建弹簧、反弹等更多效果：linear() 时间函数。在这篇博客文章中，我将向您展示它是如何工作的，并分享一些您可以立即开始使用的工具！

Intended audience

目标受众

Argh, the naming!

啊，命名！

CSS comes with several built-in preset Bézier curves, like ease-in and ease-out. One of those presets is called linear, which maintains a constant speed throughout the transition.

CSS带有几种内置的预设贝塞尔曲线，如ease-in和ease-out。其中一个预设称为linear，在过渡过程中保持恒定速度。

This tutorial is about something different. linear() is a special non-Bézier timing function that allows us to model all kinds of different motion.

本教程讲述的是一些不同的内容。 linear() 是一种特殊的非贝塞尔定时函数，允许我们模拟 各种 不同的运动。

Unfortunately, this has led to the very confusing situation where the linear timing function preset and the linear() timing function are two different things! 😅

不幸的是，这导致了一个非...