|
|||
Keyframes-Animation in Transition?
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: Code:
<div class="mercedeshover"> <div class="mercedesalles"> <div class="mercedes"></div> <div class="reifenv"></div> <div class="reifenh"></div> </div> </div> Code:
.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 |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Wie Transition starten, wenn die Seite geladen wird? | bigtail | CSS | 3 | 20.10.2012 22:07 |
Animation mit Durchlaufen eines Arrays erstellen | Garavani | Javascript & Ajax | 3 | 13.08.2012 09:53 |
Transition Problem | Loddarkwin | CSS | 20 | 04.04.2012 14:18 |
Transition will nicht | Loddarkwin | CSS | 1 | 01.04.2012 13:50 |
CSS3 Transition Tutorial - Menü mit Slide-Effekt im Apple-Style | Webstandard | Ressourcen | 0 | 05.03.2010 13:03 |