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

Question

Je suis en train de créer une animation CSS, dans laquelle je déplace des objets et je veux qu'ils restent à la position finale jusqu'à ce que l'utilisateur déplace la 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;
}

Mais dès que l'animation se termine, elle se répète. Je veux qu'elle ne se produise qu'une seule fois et qu'elle reste là où elle est jusqu'à ce que l'utilisateur s'éloigne. J'ai essayé d'utiliser la fonction de pause de la spécification, mais cela ne fonctionne pas comme je l'aurais souhaité. Toute aide est la bienvenue. Merci. :)

Answer 1

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 celle-ci.

-webkit-animation-fill-mode: forwards;"

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

"backward" quitte l'animation au début.

Answer 2

Au cas où votre animation se réinitialiserait toujours à la première image, faites attention avec la fonction commander dans lequel vous déclarez le css :

Cela fonctionne bien :

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

Ce ne sera pas le cas (retour à la première image) :

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

Tricky !

Answer 3

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

-webkit-animation-iteration-count: 1;

Answer 4

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

Answer 5

Essayez ceci :

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

:)