Impossible d'arrêter l'animation css qui disparaît après la dernière image clé
J'ai un simple css animation que j'aimerais jouer, puis s'arrêter sur la dernière image entièrement l'affichage de l'image. Mais actuellement, au moment où il joue, puis semble revenir à l'image, ainsi l'santas visage disparaît.
Comment puis-je faire jouer une seule fois puis s'arrête sur la dernière image clé ou l'affichage de l'image sans qu'il disparaît de nouveau?
<img class="santaface" src="http://imgs.tuts.dragoart.com/how-to-draw-a-santa-face_1_000000001282_3.jpg">
.santaface{
opacity:0;
position: absolute;
left:40%; top:20%; width:20%;
-webkit-animation-name: santaappear;
-webkit-animation-duration: 13s;
}
.santaface{ -webkit-animation-delay:2s;animation-delay:2s;}
@-webkit-keyframes santaappear {
0% { opacity:0;}
96% {opacity:1;}
}
source d'informationauteur Dano007
Vous devez vous connecter pour publier un commentaire.
Vous avez besoin
animation-fill-mode: forwards
pour empêcher que cela se produise.En outre, vous devez à la fin, avec une opacité de 1, donc la dernière image doit avoir une opacité de 1.
jsFiddle exemple - il fonctionne comme prévu maintenant.
Vous pouvez également raccourcir la durée de votre image clé en supprimant
0%
comme c'est déjà donné dans l'état initial.Vous pouvez également combiner
96%
et100%
.Puisque vous êtes à l'aide de plusieurs propriétés d'animation, utilisez le animation d'abréviation:
Qui serait:
Dans la démo, j'ai ajouté fournisseur de préfixes pour
-moz
/-webkit
. En plus de cela, vous devez avoir un écrit sans préfixe. En va de même pour les images-clés.