CSS3 Keyframe Animation mit JavaScript anhalten
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
animation
anis
anus
artikel
beispiel
besucher
bezugsquelle
code
eingebaut code
helfen
http
idee
jemand
posten
reaktion
starten
stoppen
teil
url
webseite
-
In eine Webseite soll eine CSS3-Keyframe -Animation eingebaut werden, bei der der Besucher die Möglichkeit haben soll, die Animation zu stoppen und wieder zu starten.
dazu habe ich zunächst ein jetzt noch vereinfachtes Animationsdemo erstellt und das folgende JavaScript eingebaut:
var anis; window.onload=function(){ anis = document.querySelectorAll('.ani'); for ( var i = 0; i < anis.length; i++ ) { anis[i].style.MozAnimationPlayState = 'running'; anis[i].style.webkitAnimationPlayState = 'running'; anis[i].style.AnimationPlayState = 'running'; } } function schalte(){ for ( var i = 0; i < anis.length; i++ ) { if ( anis[i].style.webkitAnimationPlayState === 'running' ) { anis[i].style.webkitAnimationPlayState = 'paused'; } else { anis[i].style.webkitAnimationPlayState = 'running'; } if ( anis[i].style.MozAnimationPlayState === 'running' ) { anis[i].style.MozAnimationPlayState = 'paused'; } else { anis[i].style.MozAnimationPlayState = 'running'; } if ( anis[i].style.AnimationPlayState === 'running' ) { anis[i].style.AnimationPlayState = 'paused'; } else { anis[i].style.AnimationPlayState = 'running'; } } }
AnimationPlayState kommt also in den drei Varianten prefixfrei, webkit undMoz vor. Das Ein- und Ausschalten klappt beim FF und auch mit Chrome (vermutlich auch mit anderen aktuellen Webkit-Browsern), aber beim IE10 gibt es keine Reaktion. Ich habe die Microsoft-Doku eigentlich so verstanden, dass kein Prefix genutzt wird.
Kennt jemand näheres um auch IE10-Nutzern das Stoppen der Animation zu ermöglichen?
Sehen kann man den derzeitigen Arbeitsstand hier
http://skywalk-webdesign.de/css/css3-animationen-teil-4/beispiel-01
Beitrag zuletzt geändert: 16.10.2013 9:07:43 von mein-wunschname -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Sorry, den Link habe ich korrigiert und hier meine "Bezugsquelle" bezüglich des IE:
http://msdn.microsoft.com/en-us/library/ie/hh772238%28v=vs.85%29.aspx
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage