Utilisez css pour déplacer div vers un nouvel emplacement puis arrêtez-vous là

Question

Existe-t-il un moyen CSS pur pour déplacer un div d'un endroit à un autre et arrêter. Ce que j'ai retrouvé à l'endroit d'origine.

#animate { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    animation: move 3s ease; 
} 



@keyframes move { 
    from { transform: translateX(0px); } 
    to { transform: translateX(500px); } 
} 

Si je dois JS pour cela, est il y a moyen de conditionner à la fin de l'animation au lieu de le déplacer avec délai d'attente ??

Answer 1

Essayez d'ajouter:

#animate { 
    // other styles... 
    animation-fill-mode: forwards; 
    -webkit-animation-fill-mode: forwards; 
} 

Vous pouvez voir ce travail here.

Crédit au this answer.