kostenloser Webspace werbefrei: lima-city

CSS3 Keyframe Animation mit JavaScript anhalten

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   mein-wunschname

   mein-wunschname hat kostenlosen Webspace.

   17:21, 15.10.2013

   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

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. limabone

   

   limabone hat kostenlosen Webspace.

   8:50, 16.10.2013

   Kannst du uns einen Link zu dem Artikel der IE10 Doku posten?
   
   Und eine Localhost-Verknüpfung ist auch eine recht schwache Grundlage, um dir helfen zu können.
   
   Finde die Idee dennoch sehr interessant ein Keyframe stoppen zu wollen... keep going
4. Autor dieses Themas

   mein-wunschname

   mein-wunschname hat kostenlosen Webspace.

   9:09, 16.10.2013

   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
   
   

5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?