web-dev-qa-db-fra.com

Animations d'images clés CSS3: terminer et rester sur la dernière image

J'ai rencontré des difficultés à lire une animation d'images clés CSS3 et à conserver l'élément correspondant à la dernière image une fois l'animation terminée. À ma connaissance, la propriété que je dois définir pour que cela fonctionne devrait être animation-fill-mode, qui devrait avoir la valeur forwards; cela ne fait rien.

.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... }

Cela ne fera que lire l'animation une fois, puis reviendra à la première image. J'ai trouvé un exemple d'animations d'images clés sur JSFiddle ( http://jsfiddle.net/simurai/CGmCe/ ), et changer le mode de remplissage en avant et définir le nombre d'itérations sur 1 ne ferait rien là non plus.

Toute aide serait grandement appréciée.

javascriptcsscss3animationless
37
Joshua Jennings

animation-fill-mode:forwards est la propriété correcte à utiliser. Cela ne fonctionne pas semble pour fonctionner car l'arrière-plan de l'image Sprite a une valeur par défaut background-repeat:repeat , donc le cadre dernier que vous pensez voir est en fait le cadre premier de l'image d'arrière-plan répétée.

Si vous définissez

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; }
}

et exécutez la démo, la dernière image est maintenant vide - donc forwards fait ce qu'elle devrait faire. La deuxième partie de la solution consiste à modifier les propriétés CSS finales to et steps pour positionner correctement l'arrière-plan. Nous avons donc vraiment besoin de l'arrière-plan pour nous arrêter à -450px et utilise 9 pas.

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

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

Voir la démo - J'ai seulement corrigé les propriétés Chrome. Voici également l'exemple d'image au cas où l'original disparaîtrait.

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

Changez 'infini' en '1' dans le CSS, cela le corrige pour moi

3
Adam Moseley