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 摘要。