Question Ne peut pas arrêter l'animation à la fin d'un cycle [dupliquer]


Cette question a déjà une réponse ici:

Je fais une animation CSS à la minute, et j'y déplace des trucs et je veux qu'ils restent à la position finale jusqu'à ce que l'utilisateur déplace sa souris.

body {
    background: url('osx.jpg');
    padding: 0;
    margin: 0;
    line-height: 60px;
}

@-webkit-keyframes item1 {
    0% { bottom: -120px; left: 0px; }
    10% { bottom: -40px; left: 10px; -webkit-transform: rotate(5deg); }
    100% { bottom: -40px; left: 10px; -webkit-transform: rotate(5deg); }
    }

@-webkit-keyframes item2 {
    0% { bottom: -120px; left: 0px; }
    10% { bottom: 60px; left: 20px; -webkit-transform: rotate(7deg); }
    100% { bottom: 60px; left: 20px; -webkit-transform: rotate(7deg); }
}

@-webkit-keyframes item3 {
    0% { bottom: -120px; left: 0px; }
    10% { bottom: 160px; left: 30px; -webkit-transform: rotate(9deg); }
    100% { bottom: 160px; left: 30px; -webkit-transform: rotate(9deg); }
}

    div {
    position: relative;
    }
#folder {
    width: 120px;
    margin: 0px auto;
}

#folder > div {
    position: absolute; 
}

#folder:hover > div:nth-of-type(1) {
    -webkit-animation-name: item1;
    -webkit-animation-duration: 10s;
}

#folder:hover > div:nth-of-type(2) {
    -webkit-animation-name: item2;
    -webkit-animation-duration: 10s;
}

#folder:hover > div:nth-of-type(3) {
    -webkit-animation-name: item3;
    -webkit-animation-duration: 10s;
}

Chaque fois que l'animation se termine, elle se répète. Je veux seulement que cela se produise une fois et que je reste là où l'utilisateur se déplace. J'ai essayé d'utiliser la mise en pause de la spécification, mais cela ne fonctionne pas comme prévu. Toute aide est appréciée. Merci. :)


38
2018-06-21 18:28


origine


Réponses:


Le commentaire suivant a fonctionné pour moi. Merci Michael

"Vous devez ajouter le mode de remplissage pour geler l'état de l'animation à la fin de l'animation.

-webkit-animation-fill-mode: forwards;

forwards laisse l'animation dans l'état de la dernière image

backwards laisse l'animation au début


87
2018-05-03 15:26



Juste au cas où votre animation se réinitialiserait toujours sur la première image, faites attention au commande dans lequel vous déclarez le css:

Cela fonctionne bien:

    animation: yourAnimationName 1s;
    animation-fill-mode: forwards;

Cela ne va pas (réinitialiser à la première image):

    animation-fill-mode: forwards;
    animation: yourAnimationName 1s;

Rusé!


9
2017-07-25 00:30



Si je comprends bien la question, il semble que vous ayez besoin de définir l'itération sur '1'.

-webkit-animation-iteration-count: 1;

2
2018-02-10 14:37



Les animations css3 reprennent le style par défaut à la fin de l'animation. Vous pouvez essayer quelque chose avec javascript:

Vous pouvez ajouter un eventListener à votre animation, récupérer les styles que vous souhaitez conserver, les appliquer manuellement et supprimer l'animation.

document.getElementById('yourdiv').addEventListener(
    'webkitAnimationEnd',
    function(){
        document.getElementById('yourdiv').style.backgroundPosition = '0px 0px';
        document.getElementById('yourdiv').style.webkitAnimationName = 'none';
    }, 
    false
);

1
2018-01-11 17:09



essaye ça:

-webkit-animation-duration: 10s, 10s;

:)


0
2018-06-22 09:57