Discussion :

[Gregory.M]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Gregory.M]

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.

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

[c_s_s]

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.

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.

[jm69007]

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.

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

tu mets

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Par contre j'ai pas testé!

[ornitho13]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

-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 :

Sélectionner tout - Visualiser dans une fenêtre à part

-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%