Comment ajouter de la physique aux animations CSS?

Je fais juste un chargement en utilisant css et je veux qu'ils aient un comportement réel, j'essaie avec la fonction animation-timing-function: cubic-bezier(1, 0, 1, 1) , semble bien mais pas aussi réel Comme je le veux, d'abord parce que je ne sais pas comment les paramètres cubic-bezier fonctionnent vraiment, j'ai trouvé ce site et j'ai juste joué avec eux jusqu'à ce que j'ai quelque chose de sympa.

Pour résumer, comment ajouter un comportement physique réel à mon animation?

S'IL VOUS PLAÎT SEULEMENT CSS, si possible, une solution JS est la bienvenue.

Ici, vous avez un exemple FIDDLE .

Juste une suggestion pour guider

Quelque chose comme un moins ou SCSS avec des variables physiques constantes qui sont définies, ou les valeurs que vous pouvez ajouter à la fonction et la somme du comportement physique peuvent même avoir déjà des mélanges qui simulent un certain comportement, je ne connais pas de chose simple et unique.

Thx à l'avance

Vous pouvez utiliser CSS uniquement, mais vous passerez beaucoup de temps à trouver les chiffres pour le Bezier, les positions clés de l'image, l'échelle et ainsi de suite, et en plus: un léger changement dans votre mise en page, "gravité", dimensions, distance Et vous devez commencer "tout" (pour la partie ci-dessus au moins).

Les animations CSS sont agréables, mais vous obtiendrez un meilleur résultat avec un petit code JavaScript, sans parler de beaucoup plus de flexibilité si vous devez changer quelque chose –

Définir un vecteur pour la balle
Définir une gravité arbitraire
Calculez le vecteur et rebondissez
Lier les valeurs résultantes à l'élément DOM en utilisant des transformées (donne un résultat plus lisse par rapport à la position).
Animer en utilisant la requestAnimationFrame qui se synchronise pour surveiller et donne des animations aussi simples que les animations CSS.

Exemple

Cet exemple montre la base, n'inclut pas l'ombre, mais cela reste comme un exercice pour le lecteur.

 var div = document.querySelector("div"), v = {x: 2.3, y: 1}, // some vector pos = {x: 100, y: 20}, // some position g = 0.5, // some gravity absorption = 0.7, // friction/absorption bottom = 150, // floor collision frames = 0; // to reset animation (for demo) // main calculation of the animation using a particle and a vector function calc() { pos.x += vx; // update position with vector pos.y += vy; vy += g; // update vector with gravity if (pos.y > bottom) { // hit da floor, bounce pos.y = bottom; // force position = max bottom vy = -vy * absorption; // reduce power with absorption } if (pos.x < 0 || pos.x > 620) vx = -vx; } // animate (function loop() { calc(); move(div, pos); if (++frames > 220) { // tweak, use other techniques - just to reset bounce frames = 0; pos.y = 20; } requestAnimationFrame(loop) })(); function move(el, p) { el.style.transform = el.style.webkitTransform = "translate("+p.x+"px,"+p.y+"px)"; }

 div { width:20px; height:20px; background:rgb(0, 135, 222); border-radius:50%; position:fixed; }

 <div></div>