Nachdem ich gesehen habe, dass meine bisherige Javascript-Lösung sehr langsam ist und seltsamer Weise im FF 3 Mal langsamer läuft als im IE, favorisiere ich jetzt eine reine CSS-Lösung, die nur einmal per Javascript angestoßen wird.
Sieht gut flüssig aus, nur bei Opera läuft die Animation zu spät los und zwar genau um den Wert "duration". Warum???
Gestartet wird die Animation mit einem Klick auf das Bild.
Sieht gut flüssig aus, nur bei Opera läuft die Animation zu spät los und zwar genau um den Wert "duration". Warum???
Gestartet wird die Animation mit einem Klick auf das Bild.
Code:
<html>
<head>
<style type="text/css">
#Stern{position:absolute;left:54px;top:54px;z-index:1;height:332px;width:332px;text-align:center;display:block;
-webkit-animation-name:Stern;
-webkit-animation-duration:10s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
-webkit-animation-delay:0s;
-webkit-animation-play-state:paused;
animation-name:Stern;
animation-duration:10s;
animation-timing-function:linear;
animation-iteration-count:infinite;
animation-delay:0s;
animation-play-state:paused;
}
@-webkit-keyframes Stern{
from{-webkit-transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg)}
}
@keyframes Stern{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}
</style>
<script language="JavaScript" type="text/javascript">
function drehen(){
document.getElementById("Stern").style.WebkitAnimationPlayState="running";
document.getElementById("Stern").style.animationPlayState="running";
}
</script>
</head>
<body>
<div id="Stern">
<img src="http://www.yogispiele.de/Spiele/Peng/Rad.png" width="332" height="332" alt="" onclick="drehen()">
</div>
</body>
</html>
