it-swarm.com.de

CSS3-Keyframe-Animationen: Beenden und bleiben Sie auf dem letzten Frame

Beim Versuch, eine CSS3-Keyframe-Animation abzuspielen, sind einige Schwierigkeiten aufgetreten. Nach Abschluss der Animation befindet sich das betreffende Element im letzten Frame. Nach meinem Verständnis sollte die Eigenschaft, die ich festlegen muss, damit dies funktioniert, der Animationsfüllmodus sein, der den Wert "vorwärts" haben sollte. das macht nichts.

.animatedSprite { 
    .animation-name: Sprite;
    .animation-duration: .5s;
    .animation-iteration-count: 1;
    .animation-direction: normal; 
    .animation-timing-function: steps(3); 
    .animation-fill-mode: forwards;
    //Vendor prefixes... }

Dadurch wird die Animation nur einmal abgespielt und dann zum ersten Bild zurückgekehrt. Ich habe bei JSFiddle ( http://jsfiddle.net/simurai/CGmCe/ ) ein Beispiel für Keyframe-Animationen gefunden, und das Ändern des Füllmodus auf Vorwärts und das Festlegen der Iterationszahl auf 1 würde nichts bewirken dort auch nicht.

Jede Hilfe wäre sehr dankbar.

37
Joshua Jennings

animation-fill-mode:forwards Ist die richtige Eigenschaft. Ist nicht scheint zu funktionieren, da der Sprite-Bildhintergrund einen Standard hat background-repeat:repeat , also den letzten Frame im Glossar erklärt Sie denken, Sie sehen, ist tatsächlich der first Frame des wiederholten Hintergrundbilds.

Wenn Sie festlegen

background: url("http://files.simurai.com/misc/Sprite.png") no-repeat

animation: play .8s steps(10) forwards;

@keyframes play {
    from { background-position:    0px; }
    to { background-position: -500px; }
}

und starte die Demo, der letzte Frame ist jetzt leer - also macht forwards das, was es tun soll. Der zweite Teil der Lösung besteht darin, die endgültigen CSS-Eigenschaften to und steps so zu ändern, dass der Hintergrund korrekt positioniert wird. Wir brauchen also unbedingt den Hintergrund, um bei -450px Anzuhalten und die Schritte 9 Auszuführen.

-webkit-animation: play .8s steps(9) forwards;

@keyframes play {
    from { background-position: 0; }
    to { background-position: -450px; }
}

Siehe Demo - Ich habe nur die Chrome Eigenschaften behoben. Auch hier ist das Beispielbild falls das Original verschwindet.

Waving Sprite

.hi {
    width: 50px;
    height: 72px;
    background: url("http://i.stack.imgur.com/ilKfd.png") no-repeat;
    
    -webkit-animation: play .8s steps(9) forwards;
       -moz-animation: play .8s steps(10) infinite;
        -ms-animation: play .8s steps(10) infinite;
         -o-animation: play .8s steps(10) infinite;
            animation: play .8s steps(9) forwards;
}

@-webkit-keyframes play {
   from { background-position:    0px; }
     to { background-position: -450px; }
}

@-moz-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-ms-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-o-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -450px; }
}
<div class="hi"></div>
59
andyb

Ändern Sie "unendlich" in "1" in der CSS, dies behebt es für mich

3
Adam Moseley