web-dev-qa-db-fra.com

Animations en chaîne CSS3

J'ai une série d'animations que je dois exécuter sur du texte et je prévoyais d'utiliser CSS3. Mon plan est d’avoir du texte qui descend lentement à l’écran et après qu’il atteigne une certaine partie de l’écran, certains mots seront mis en surbrillance et le texte continuera finalement à descendre à l’écran et disparaîtra pour laisser place à un texte supplémentaire.

Ma question est la suivante: quel est le meilleur moyen de "chaîner" ces animations? Devrais-je avoir une animation pour déplacer l'écran, une animation distincte pour mettre en surbrillance le texte et une troisième animation pour déplacer le reste de l'écran? Puis-je définir un délai d'animation pour ne démarrer que les deuxième et troisième animations une fois les animations précédentes terminées? Je pense que je peux très bien créer des animations séparées qui seront chaînées, mais je ne sais pas comment ces animations devraient déclencher la prochaine animation.

animationcss3
36
wlindner

Il existe plusieurs façons de chaîner les animations - il existe une méthode purement CSS, en utilisant -webkit-animation-delay, où vous définissez plusieurs animations et indiquez au navigateur quand les démarrer, par exemple.

-webkit-animation: First 1s, Second 2s;
-webkit-animation-delay: 0s, 1s;
/* or -moz etc.. instead of -webkit */

Vous pouvez également vous connecter à l'événement de fin d'animation, puis en commencer un autre. J'ai trouvé que ce n'était pas fiable, cependant.

$('#id')
  .bind('webkitAnimationEnd',function(){ Animate2() })
  .css('-webkit-animation','First 1s');

La troisième méthode consiste à définir des délais d'attente en Javascript et à modifier la propriété d'animation css. C’est ce que j’utilise le plus souvent, car c’est le plus flexible: vous pouvez facilement modifier le minutage, annuler des séquences d’animation, en ajouter de nouvelles et différentes, et je n’ai jamais eu de problème d’échec, comme je l’ai lié à la transitionEnd un événement.

$('#id').css('-webkit-animation','First 1s');
window.setTimeout('Animate2("id")', 1000);
function Animate2....

C'est plus un code qu'une liaison, et plus qu'un CSS, bien sûr, mais c'est fiable et plus flexible, à mon humble avis.

73
Matt H

Alors que je cherchais la même chose, sans utiliser quelque chose comme jQuery, j’ai eu la même idée de chaîner, en écoutant webKitanimationEnd, comme suggéré par d’autres. De cette façon, vous pouvez utiliser CSS pour les transitions et pour la synchronisation de l'animation.

Vous pouvez créer un tableau sous forme de file d'attente et y ajouter l'élément que vous souhaitez animer (avec certaines options telles que l'effet et le type d'animation). Ensuite, vous pouvez traiter cette file d'attente en passant à l'animation suivante lorsqu'une animation se termine. Cette animation peut être un élément différent ou une animation ultérieure du même élément. N'oubliez pas de supprimer la classe d'animation de la className à la fin de l'animation. Pour chaque étape, ajoutez simplement les classes CSS appropriées, puis supprimez-les à la fin de l'animation. Étant donné que nous écoutons animationEnd, la synchronisation peut être effectuée avec CSS uniquement, en laissant uniquement le traitement en JavaScript.

C’est une tâche tellement minimale que si votre projet n’utilise pas déjà une bibliothèque comme jQuery, vous devez simplement utiliser Vanilla JS.

J'ai fait des recherches et j'ai réussi à organiser quelque chose. Voir ce violon pour un exemple:

var manager = new AnimationManager();
manager.enqueue(animations).animate();

Le produit final est sur mon github repo .

J'espère que cela vous donne un aperçu/aide.

1
Danillo2k

Il s'agissait simplement de créer une chaîne d'animations dans Chrome 16 en utilisant la méthode "droite" - et la plus générale -: déclencher la deuxième animation sur webkitAnimationEnd, avec les animations définies par les images clés référencées à partir d'une règle de classe qui définit les variables animation- * et déclenchées. en ajoutant le nom de la classe aux éléments cibles. Ceci est "correct" car il définit tous les intervalles de temps de manière relative, une fois, car il est le plus flexible (chaque animation, par exemple, peut impliquer des éléments séparés, ce que vous ne pouvez pas faire dans une image clé) et parce qu’elle optimise l’utilisation de CSS3.

Ça a échoué. Corrigé en supprimant le nom de classe de la transition terminée avant de lancer la suivante!

0
Glenn Widener