ai / ai/easings.net

Different cubic-bezier() presets in Chrome DevTools

Ouverte
#153 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
Langage dominant
CSS
Étoiles
8.7k
Forks
696
Métriques de merge des PR
Aucune PR mergée en 30 j

Description

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?

Guide de contribution

Aucun guide de contribution indexé pour ce dépôt

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.