ai / ai/easings.net

Different cubic-bezier() presets in Chrome DevTools

未关闭
#153 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
主要语言
CSS
星标
8.7k
派生
696
PR 合并指标
30 天内没有已合并 PR

描述

This is more curiosity than anything. I noticed that the `cubic-bezier()` presets in Chrome DevTools are different from the values here.

For example, this is what Chrome DevTools suggests for `Out - Cubic`:

![screenshot-20220317-202350](https://user-images.githubusercontent.com/2036475/158870539-9a214846-5de0-427d-8841-a4540e6b8840.png)

And this is what Easings.net's `easeOutCubic` looks like:

![screenshot-20220317-203646](https://user-images.githubusercontent.com/2036475/158872670-8f6bb262-1710-4931-8be9-babb93a0540c.png)

Although the values look quite different, I compared them in DevTools, and the resulting curves are very similar. But, not exactly the same.

I find this rather strange since Google themselves reference and recommend Easings.net here:
https://developers.google.com/web/fundamentals/design-and-ux/animations/choosing-the-right-easing

My understanding was that easing functions were predefined mathematical equations, not open to interpretation. So how is it that these can differ?

贡献指南

这个仓库没有索引到贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。