28172 sujets

CSS et mise en forme, CSS3

[Résolu] Animation-delay et animation-iteration-count

Bonjour tout le monde,

Un message qui s'adresse aux passionnés de l'animation web Smiley smile . Je tente de résoudre un problème que certains d'entre nous ont peut être déjà rencontré sur des animations css poussées.

Je ne parle pas d'un simple élément 1 qui va d'un point A à un point B mais plutôt un élément 1 qui va d'un point A à un point B et suit une animation d'un élément 2 d'un point A à un point B. Ok on comprend rien à mon truc alors voici un schéma d'un exemple basique Smiley smile .

upload/27370-animation-.jpg

Dans cet exemple l'animation est en boucle. L'élément 1 met 2sec à rejoindre le point B puis 2sec après le déclenchement de l'animation, l'élément2 met à son tour 2sec pour rejoindre le point B (afin d'être syncho. avec l'animation de l'élément1).

Et là on arrive au problème suivant: l'élément 1 n'a pas de délai pour se déclencher, cela veut dire qu'une fois son animation terminée, il se relancera tout seul quand il aura rejoint le point B sans prendre en compte la fin de l'animation de l'élément 2 et du coup vous l'aurez compris cela décale tout dans le temps, au fur et mesure que les animations s'enchainent.

Vous pourriez me dire "tu n' as qu'à mettre un animation-delay: de 4-5sec sur l'élément 1 pour attendre la fin d'animation de l'élément 2. Oui dans ce cas effectivement cela fonctionnerait sauf que, quand il y' a une dizaine d'éléments qui doivent se déclencher les uns après les autres ça devient ingérable (surtout si faut revoir les temps) et c'est là ou je vois la limite des animations css...

À moins qu'il y'ait une astuce sans JS ? Smiley smile J'ai regardé du coté de SMIL, l'autre façon d'animer avec du SVG, il y' a cette propriété qui a attirer mon attention

<animate id="move"
         link:href="#myCircle" 
         attributeName="cx" 
         attributeType="XML"             
         from="50" 
         to="450" 
         dur="1s" 
         fill="freeze" 
         begin="click" 
         [b]restart="whenNotActive"[/b]
/>


Ce bout de code est issu d'un slide de Sara Soueidan > http://slides.com/sarasoueidan/animating-svg-with-css-and-smil-full-version#/49. La fonction restart pourrait je pense être intéressante dans mon cas sauf que SMIL n'est pas supporté par IE :'(

Finalement pour résumer l'objectif serait que mon animation fonctionne à la manière d'un gif en boucle. Une fois que tous les éléments ont finit leur animation, on repart de zéro à l'état initial pour chaque éléments.

Peut être que la fonction calc() pourrait être utile sur animation-delay:

Avez-vous des avis, des retours d'expérience sur ce cas ? Merci à tous.
Modifié par Jordane L. (09 Apr 2015 - 13:24)
C'est exactement ça dans la théorie Smiley smile et j'imagine que si il y avait un 3ème rectangle le code serait alors:

<animate id="move" begin="click; move3.end" />
<animate id="move2" begin="move.end" />
<animate id="move3" begin="move2.end" />


Ça serait tellement simple d'utiliser cette technique (SMIL) si IE supportait comme je l'ai ennoncé SMIL http://caniuse.com/#search=smil

C'est pour ça que je cherche une astuce avec les animations CSS. J'ai trouvé cet exemple http://codepen.io/rss/pen/oIxDC?editors=110 mais ça me semble difficilement maintenable.

Je ne comprends pas qu'une propriété animation css de ce type n'existe pas. C'est dommage ça nous pousse à faire encore une fois l'impasse sur IE...
Merci. L'idée est super bonne de répartir les % de la timeline sur chaque animation.

anim1: 0% à 50% de 3 secondes
anim2: 50% à 100% de 3 secondes

Ça évite des calculs complexes, mais par contre sur mon exemple http://codepen.io/Ananze/pen/bNPWKw?editors=110, je ne comprends pas qu'à la fin de l'animation globale, les éléments fassent une transition dans le sens inverse. Il faudrait comme dans ton exemple que les éléments reviennent au point de départ sans transition et je ne vois pas ce qui bloque à ce niveau là..
Modérateur
en fait quand tu ne spécifie pas 0% ou 100% il les remplis tout seul (selon la situation hors animation)
Donc quand tu écris:

@keyframes anim2 {
  25%{margin-left:100px;}
  50%{margin-left:200px;}
}
.element2 {
  margin-left:200px;
  animation: anim2 5s linear infinite;
}


pour element 2 c'est comme si tu avais écrit:

@keyframes anim2 {
  0%{margin-left:200px;}
  25%{margin-left:100px;}
  50%{margin-left:200px;}
  100%{margin-left:200px;}
}
.element2 {
  margin-left:200px;
  animation: anim2 5s linear infinite;
}


donc si tu écris ainsi tu n'auras plus ces problèmes:


@keyframes anim2 {
  0%{margin-left:100px;}
  25%{margin-left:100px;}
  50%{margin-left:200px;}
}


http://codepen.io/anon/pen/OPegXp
Effectivement je comprends mieux la logique Smiley smile . Après je ne sais pas si on peut mettre par exemple un délai de 2s avant que l'animation générale ne se re-déclenche à nouveau sans que ça décale tout.

Je te remercie de m'avoir éclairer là dessus. Je vais tenter de mettre ça en place sur une animation complexe afin de voir si ce genre de méthode est facilement applicable.

Je marquerai ce sujet comme résolu dans la journée ! Smiley smile
Modérateur
si tu mets le délais avant chaque animation ça devrait le faire.
Après évidemment pour des cas complexes ça va être plus délicat d'utiliser cette technique sans un peu de javascript pour observer la fin d'une animation et relancer ensuite une autre.
Sujet clos
Aller à