kostenloser Webspace werbefrei: lima-city


CSS3 Keyframe Animation mit JavaScript anhalten

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    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. 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 :wave:
  4. Autor dieses Themas

    mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    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?

Über lima-city

Login zum Webhosting ohne Werbung!