Animations de chaîne CSS3
J'ai une série d'animations que je dois effectuer sur du texte, et je prévoyais d'utiliser CSS3. Mon plan est d'avoir un texte qui se déplace lentement vers le bas de l'écran et après qu'il arrive à une certaine partie de l'écran, certains mots seront mis en évidence et éventuellement le texte continuera à se déplacer vers le bas de l'écran et disparaître faisant de la place pour plus de texte.
Ma question Est, Quelle est la meilleure façon de "chaîner" ces animations. Devrais-je avoir une animation pour descendre l'écran, une animation séparée pour mettre en évidence le texte et une troisième animation pour descendre le reste de l'écran? Ensuite, devrais-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 vais bien avec la création des animations séparées qui seront enchaînées ensemble, mais je ne suis pas sûr de savoir comment ces animations devraient déclencher l'animation suivante pour commencer.
3 réponses
Il y a plusieurs façons d'enchaîner les animations - il y a la manière CSS pure, en utilisant-webkit-animation-delay, où vous définissez plusieurs animations et dites 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 */
Une autre façon est de se lier à l'événement de fin d'animation, puis de commencer un autre. J'ai trouvé cela peu 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 la plupart du temps, comme c'est le plus flexible: vous pouvez facilement changer le timing, 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 si j'avais une liaison à l'événement transitionEnd.
$('#id').css('-webkit-animation','First 1s');
window.setTimeout('Animate2("id")', 1000);
function Animate2....
C'est plus de code qu'une liaison, et plus que CSS, bien sûr, mais c'est relable et plus flexible, à mon humble avis.
Alors que je cherchais la même chose, sans l'utilisation de quelque chose comme jQuery, j'ai eu la même idée de chaînage, en écoutant webKitanimationEnd, comme suggéré par d'autres. De cette façon, vous pouvez utiliser CSS pour les transitions et pour le timing de l'animation.
Vous pouvez créer un tableau en tant que File d'attente et y ajouter l'élément que vous souhaitez animer (avec certaines options comme l'effet et le type d'animation). Ensuite, vous pouvez traiter cette file d'attente en allant à l'animation suivante lorsqu'un l'animation se termine. Cette animation peut être un élément différent ou une animation ultérieure au même élément. N'oubliez pas de supprimer la classe animation du className lorsque l'animation se termine. Pour chaque étape, ajoutez simplement les classes CSS appropriées, puis supprimez-les Lorsque l'animation est terminée. Parce que nous écoutons animationEnd, le timing peut être fait avec CSS seulement, laissant juste le traitement à JavaScript.
C'est une tâche si minime que si votre projet n'utilise pas déjà une bibliothèque comme jQuery, vous devriez simplement utiliser Vanilla js.
J'ai fait des recherches et j'ai réussi à rassembler quelque chose. Voir ce violon pour un exemple:
var manager = new AnimationManager();
manager.enqueue(animations).animate();
, Le produit final est sur mon dépôt github.
J'espère que cela vous donne un aperçu/aide.
Était en train de construire une chaîne d'animations dans Chrome 16 en utilisant le "bon" - et le plus général -: lancer la deuxième animation sur webkitAnimationEnd, avec les animations définies par des images clés référencées à partir d'une règle de classe qui définit les variables animation -*, et déclenchée en ajoutant le nom de la classe aux éléments cibles. C'est "correct" car il définit tous les intervalles de synchronisation relativement, une fois, parce que c'est le plus flexible (par exemple, chaque animation peut impliquer des éléments séparés, qui vous ne pouvez pas faire dans une image clé), et parce qu'il maximise l'utilisation de CSS3.
Il a échoué. Correction en supprimant le classname de la transition terminée avant de tirer le suivant!