web-dev-qa-db-fra.com

Assouplissement élastique en CSS3, meilleure approche

Je voudrais émuler une fonction d'assouplissement élastique en CSS3. CSS3 ne le supporte pas nativement, j'ai donc créé mes propres images clés, et il semble correct , mais pas parfaitement naturel.

Je ne veux PAS de solution qui nécessite des scripts JavaScript supplémentaires. Tous les autres messages sur StackOverflow ont des solutions JS acceptées.

Quelle est la meilleure façon d'implémenter l'assouplissement élastique en CSS3 pur?

Voici mon travail jusqu'à présent, si cela aide quelqu'un ...

https://jsfiddle.net/407rhhnL/1/

J'anime les prismes rectangulaires isométriques rouges, verts et bleus. J'ai simulé un assouplissement élastique manuellement en codant en dur les images clés CSS3 suivantes:

@include keyframes(popup) {
  0% {

  }

  20% {
    transform: translateY(-50px);
  }

  40% {
    transform: translateY(20px);
  }

  60% {
    transform: translateY(-6px);
  }

  90% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(0px);
  }
}

Je ne cherche pas de suggestions pour peaufiner ce code, j'aimerais savoir s'il existe une meilleure solution que le codage en dur.

css3css-animations
14
Jimmie Tyrrell

En fonction des limites de votre navigateur (et si vous utilisez CSS3, vous devriez être d'accord malgré tout), vous pouvez réellement appliquer des transitions d'accélération avec le mot clé cubic-bezier () à la place.

Un exemple d'animation ressemblerait à ceci:

transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
transition-duration: 2.9s;

article de blog de Lea Vero couvre assez bien cela.

19
Phil.Wheeler

Beaucoup de grandes transitions cubiques-bezier disponibles ici:

http://easings.net/

Quelque chose comme ça pourrait être ce que vous voulez:

transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
8
Rowan