ai / ai/easings.net

Different cubic-bezier() presets in Chrome DevTools

オープン
#153 コメント 0 件 リアクション 0 件 担当者 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 を短くまとめたダイジェスト。