web-dev-qa-db-fra.com

Impossible d'arrêter l'animation à la fin d'un cycle

Je fais une animation CSS à la minute, et dedans je déplace des trucs et je veux qu'elle reste en position finale jusqu'à ce que l'utilisateur éloigne 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 simplement. Je ne veux que cela se produise une fois et reste où il est jusqu'à ce que l'utilisateur s'éloigne. J'ai essayé d'utiliser la chose suspendue de la spécification, mais cela ne fonctionne pas comme je m'y attendais. Toute aide est appréciée. Merci. :)

animationwebkitcss3
44
Johnny

Le commentaire suivant a fonctionné pour moi. Merci michael

"Vous devez ajouter le mode de remplissage pour figer 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 quitte l'animation au début

98
iancrowther

Juste au cas où votre animation se réinitialise toujours à la première image, soyez prudent avec le ordre dans lequel vous déclarez le css:

Cela fonctionne bien:

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

Ce ne sera pas (réinitialiser à la première image):

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

Rusé!

15
Mr_Pouet

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

-webkit-animation-iteration-count: 1;
2
word5150

Les animations css3 sont réinitialisées au 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
Stef

essaye ça:

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

:)

0
FrozenButcher