Discussion :

[JefReb]

Bonjour à tous.
Je ne trouve pas mon erreur sur cette animation. Certainement une incompréhension de ma part, mais je souhaiterais que l'animation s'arrête à 250px à la fin de l'animation.
Mais juste après 100%, elle se recale brusquement et complètement à gauche (left:0px).
Voir codepen: http://codepen.io/anon/pen/kHJux/

Je n'ai pas mis -webkit- pour simplifier.

Code CSS:

Code CSS :

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

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
#page        { width:600px; height:80px; margin:10px auto; border:1px solid black; }
.animated2
{
	width:60px;
	height:40px;
	background:red;
	color:#ffffff;
	position:relative;
	font-weight:bold;
	font-size:20px;
	margin:10px;
	padding:10px;
	border-radius:5px;
	animation:animated2;
	animation-duration:5s;
	animation-iteration-count:1;
	animation-direction:normal;
 
}
 
@keyframes animated2
{
0%		{transform: rotate(0deg);left:0px;}
25%		{transform: rotate(20deg);left:0px;}
50%		{transform: rotate(0deg);left:500px;}
55%		{transform: rotate(0deg);left:500px;}
70%		{transform: rotate(0deg);left:400px;}
100%            {transform: rotate(-360deg);left:250px;}
}

code html:

Code HTML :

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

1
2
3
<div id="page">
   <div class="animated2">CSS3<br><span style="font-size:10px;">Animation</span></div>
</div>

Merci aux passionnés de leur lumière.

[JefReb]

Ooops je viens de trouver la réponse.
Evidemment, je n'ai pas positionné la position:relative de .animated2 en mettant sa position finale left:250px.
Désolé, j'ai tiré trop vite.
Merci