Animation CSS3 par images clés inversion des images clés de saut

Question

J'ai une simple animation CSS3 en images clés que je voudrais marche arrière pendant qu'il fonctionne . Voir le code ici : http://jsfiddle.net/breizo/EUVAv/

@-webkit-keyframes transform-keyframes {
0%      {-webkit-transform:translateX(0px) translateY(0px) rotate(270deg);}
25%     {-webkit-transform:translateX(200px) translateY(0px) rotate(270deg);}
25.01%  {-webkit-transform:translateX(200px) translateY(0px) rotate(0deg);}
50%     {-webkit-transform:translateX(200px) translateY(200px) rotate(0deg);}
50.01%  {-webkit-transform:translateX(200px) translateY(200px) rotate(90deg);}
75%     {-webkit-transform:translateX(0px) translateY(200px) rotate(90deg);}
75.01%  {-webkit-transform:translateX(0px) translateY(200px) rotate(180deg);}
100%    {-webkit-transform:translateX(0px) translateY(0px) rotate(180deg);}
}

Quelqu'un a une astuce pour empêcher l'animation de sauter à une autre image clé que l'actuel ? Il semble qu'il saute à l'image clé symétrique à la moitié de la durée.

Toute contribution est grandement appréciée.

Answer 1

J'ai eu le même problème en utilisant CSS pour animer un catalogue de produits en carrousel 3D dans deux directions en fonction de :hover.

Après avoir bidouillé des idées évidentes comme animation-fill-mode:forwards et autres, sans la moindre chance, ce qui a finalement résolu le problème a été de mélanger deux bouts de syntaxe de transition avec une durée minuscule et la transformation elle-même comme propriété. Au cours de la poursuite de la transition pour attraper l'état de la transformation, les mises à jour de l'élément transformé sont restées intactes, et l'effet semble correspondre aux spécifications, donc cela devrait être une solution valide.

transition-duration: 0.2s;transition-property:transform;

Pardonnez les fautes de frappe, car j'utilise un clavier.

Answer 2

Après beaucoup d'arrachage de cheveux (il n'en reste plus beaucoup...), j'ai fini par utiliser l'excellente bibliothèque greensock : http://www.greensock.com/gsap-js/ Cela permet de mieux contrôler l'ensemble de l'animation.