[highland3r]

Moin! Ich habe ein Auto als div (.mercedes), zwei div's mit rotierenden Reifen (.reifenv und .reifenh, mit @keyframes animiert). Diese liegen über dem Auto um das Fahren zu simulieren.
Die drei div's habe ich dann in eine "über-div" (.mercedesalles) getan und diese div mit keyframes so animiert das sie (bzw. das auto) von links ins bild fährt und dort bleibt.

unten ist ein bild davon!

so weit so gut, nun zum problem:
ich möchte dass, wenn man mit der maus auf das auto geht (also hovert), das dieses dann nach rechts raus fährt. dafür habe ich eine div (.mercedeshover) um die .mercedesalles div gelegt und versucht diese mit transition zu animieren:

<div class="mercedeshover">
            <div class="mercedesalles">
   				<div class="mercedes"></div> 
  				<div class="reifenv"></div> 
  				<div class="reifenh"></div> 
          	</div>
       </div>

.mercedeshover { 
        transition-timing-function: mercedeshover(0.7,0.1,0.8,0.2);  
        transition-property: margin-left; 
        transition-duration: 1s; }
    
.mercedeshover:hover { 
        margin-left: 500px; }

.mercedesalles {
	position:absolute;
	width:0px; height:1px;
	top: 0px; left:10px;
	animation:mercedesalles 14s linear 1;
	-webkit-animation:mercedesalles 14s linear 1;
	-o-animation:mercedesalles 14s linear 1;}

@-webkit-keyframes mercedesalles {
  	0% 		{left:-280px;}
    12%		{left:70px;}
	17% 	{left:10px;}
	75% 	{left:10px;}
	100%	{left:10px;}
}

.mercedes {
	position:absolute;
	width:728px; height:90px;
	background-image:url(mercedes.png);}

.reifenv {
	position:absolute;
	width:25px;height:25px;
	top:53px; left:91px;
	opacity:0.7;
	background-image:url(reifenv.png);
	animation:reifen 1s linear infinite;
	-webkit-animation:reifen 1s linear infinite;
	-o-animation:reifen 1s linear infinite;}
	
.reifenh {
	position:absolute;
	width:25px; height:25px;
	top:53px; left:193px;
	opacity:0.7;
	background-image:url(reifenh.png);
	animation:reifen 1s linear infinite;
	-webkit-animation:reifen 1s linear infinite;
	-o-animation:reifen 1s linear infinite;}

@-webkit-keyframes reifen {
    0% 		{-webkit-transform:rotate(0deg);}
    100% 	{-webkit-transform:rotate(2560deg);}
}

nur irgendwie passiert nichts, beim hover :/
Woran könnte das liegen?

Danke schonmal!

[Bild von der Animation][1]


[1]: Directupload.net - 4r4ki5cl.png

[highland3r]

kann mir da keiner weiterhelfen? wäre echt wichtig