CSS3 webkit animation

Bonjour,
J'ai fait une petite animation css3 qui déplace un élément à un point fixe. Ca marche sans problème, par contre à la fin de l'animation l'élément retourne à sa position d'origine. Est il possible d'éviter cela?

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

@-webkit-keyframes move-element { 0% { } 100% { top: 100px; left: 100px; } }   #greg { -webkit-animation: move-element 2s 1 alternate; }

---

Gregory :)

Salut,

Je ne sais pas s'il y a un paramètre pour bloquer l'animation après le premier traitement, mais en attendant tu peux ruser en faisant durer l'animation très très très longtemps.

Par exemple, en multipliant le temps total de l'animation par 10000 (par exemple) et en divisant le temps du premier palier par autant, tu obtiendras le même résultat mais l'animation semblera s'arrêter alors qu'elle continue.
Comme tu n'as qu'un seul palier (tu passes de 0% à 100% directement), c'est très simple à faire.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

@-webkit-keyframes move-element { 0% { } 0.001% { top: 100px; left: 100px; } 100% { } } #greg { -webkit-animation: move-element 200000s 1 alternate; }

---

Cela dit, ça reste du bricolage. :aie:

Citation:

---

Envoyé par c_s_s

Salut,

Je ne sais pas s'il y a un paramètre pour bloquer l'animation après le premier traitement, mais en attendant tu peux ruser en faisant durer l'animation très très très longtemps.

Par exemple, en multipliant le temps total de l'animation par 10000 (par exemple) et en divisant le temps du premier palier par autant, tu obtiendras le même résultat mais l'animation semblera s'arrêter alors qu'elle continue.
Comme tu n'as qu'un seul palier (tu passes de 0% à 100% directement), c'est très simple à faire.

Cela dit, ça reste du bricolage. :aie:

---

Effectivement le rendu est similaire le problème reste le meme. Aprés l'animation mon élément retournera à sa position d'origine quoi qu'il arrive.

Je pourrai feinté avec du javascript, mais ca m'étonne que ce ne soit pas possible

Citation:

---

Envoyé par Gregory.M

Aprés l'animation mon élément retournera à sa position d'origine quoi qu'il arrive.

---

C'est vrai, mais bon, seulement après 200000 secondes dans l'exemple proposé (ce qui fait quand même plus de 55 heures).
On peut presque assimiler ça à une animation sans retour, sauf si tous tes visiteurs ont l'habitude de rester plus de 55 heures sur la page où se trouve l'animation, évidemment. :mrgreen:

Plus sérieusement, s'il existe une option permettant de bloquer l'animation après le traitement, ça m'intéresse de la connaître.

Citation:

---

Envoyé par c_s_s

C'est vrai, mais bon, seulement après 200000 secondes dans l'exemple proposé (ce qui fait quand même plus de 55 heures).
On peut presque assimiler ça à une animation sans retour, sauf si tous tes visiteurs ont l'habitude de rester plus de 55 heures sur la page où se trouve l'animation, évidemment. :mrgreen:

Plus sérieusement, s'il existe une option permettant de bloquer l'animation après le traitement, ça m'intéresse de la connaître.

---

Normalement y'a une propriété pour ça pour le nombre de fois ou l'on repete l'animation, c'est la propriété -webkit-animation-iteration-count

http://css-infos.net/property/-webki...teration-count

exemple au lieu de

Code:

---

-webkit-animation:pulse 1.5s infinite ease-in-out;

---

tu mets

Code:

---

-webkit-animation:pulse 1.5s 1 ease-in-out;

---

Par contre j'ai pas testé!

Cette valeur de la propriété permet de boucler ou non une animation et non pas de la stopper après le premier traitement comme le souhaiterait Gregory.M.

Code:

---

-webkit-animation:pulse 1.5s infinite ease-in-out;

---

s'explique par : mon animation pulse doit se faire pendant 1.5 seconde (de 0% à 100%) et ensuite recommencer de manière infini en boucle (avec une fonction ease-in-out)

Code:

---

-webkit-animation:pulse 1.5s 1 ease-in-out;

---

s'explique par : mon animation pulse doit se faire pendant 1.5 seconde (de 0% à 100%) et ensuite ne pas refaire l'animation

Dans ces 2 cas, l'animation se fera de 0 à 100%

Pourquoi ne pas utiliser les transitions dans ce cas là?

tu fais ton animation sur un click ou un hover ? si c'est le cas, utilise les transitions en css3 et un peu de javascript (et aussi pourquoi pas les transformation 2D via la fonction de transformation translate).

Voici un exemple (avec transition et jquery)

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> <style type="text/css"> .pointDepart{ position:absolute; top:0px; left: 0px; width:200px; height:200px; border:1px solid #000; -webkit-transition:all 1s ease-in; } .pointArrive{ top:100px; left:100px; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('.pointDepart').click(function(){ $(this).addClass('pointArrive'); });   }); </script> </head> <body> <div class="pointDepart">   </div> </body> </html>

---

Salut,

Il faut inverser l'animation.

Code:

---

1 2 3 4 5 6 7

@-webkit-keyframes move-element { 0% { top: 0; left: 0; } 100% { } }

---

Et tu définis ton état final dans ton composant #greg :

Code:

---

1 2 3 4 5

#greg { top: 100px; left: 100px; -webkit-animation: move-element 2s 1 alternate; }

---

En plus cela se dégrade proprement : les navigateurs qui ne supporte pas -webkit-animation afficheront directement le composant à son emplacement.


a++

Bonjour,

J'ai aussi eu ce problème, sauf que la méthode d'inverser l'animation ne fonctionne pas lorsqu'on veut la faire dans deux sens différents.

Il faut donc ajouter cette ligne au code pour que l'animation ne revienne pas à sa position d'origine.

Code:

---

-webkit-animation-fill-mode: forwards;

---

++