Arrêt d'une animation CSS3 sur la dernière image

Question

J'ai une animation CSS3 en 4 parties qui se joue au moment du clic, mais la dernière partie de l'animation est destinée à la faire disparaître de l'écran.

Cependant, il revient toujours à son état d'origine après la lecture. Quelqu'un sait-il comment je peux l'arrêter sur son dernier cadre css (100%) ou encore comment se débarrasser de toute la division dans laquelle il se trouve une fois qu'il a joué.

@keyframes colorchange {
  0%   { transform: scale(1.0) rotate(0deg); }
  50%  { transform: rotate(340deg) translate(-300px,0px) }
  100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}

Answer 1

Vous êtes à la recherche de :

animation-fill-mode: forwards;

Plus d'informations sur MDN et la liste de support des navigateurs sur peut utiliser .

Answer 2

La meilleure solution semble être de placer l'état final dans la partie principale de la css. Comme ici, j'ai mis la largeur à 220px de sorte qu'il devient finalement 220px . Mais en commençant à 0px;

div.menu-item1 {
  font-size: 20px;
  border: 2px solid #fff;
  width: 220px;
  animation: slide 1s;
  -webkit-animation: slide 1s; /* Safari and Chrome */
}
@-webkit-keyframes slide { /* Safari and Chrome */
  from {width:0px;}
  to {width:220px;}
}

Answer 3

Le problème n'est-il pas que vous remettez le webkitAnimationName à zéro, ce qui réinitialise le CSS de votre objet à son état par défaut ? Ne restera-t-il pas là où il était si vous supprimez la fonction setTimeout qui réinitialise l'état ?

Answer 4

Je viens de poster une réponse similaire, et vous voudrez probablement y jeter un coup d'œil :

http://www.w3.org/TR/css3-animations/#animation-events-

Vous pouvez déterminer les aspects d'une animation, tels que le démarrage et l'arrêt, puis, une fois que l'événement "stop" a été déclenché, vous pouvez faire ce que vous voulez du dom. J'ai essayé cela il y a quelque temps, et cela peut fonctionner, mais je suppose que vous allez être limité à webkit pour le moment (mais vous avez probablement déjà accepté cela). Par ailleurs, étant donné que j'ai posté le même lien pour deux réponses, j'aimerais donner ce conseil général : consultez le W3C - ils écrivent pratiquement les règles et décrivent les normes. Les pages sur le développement de webkit sont également très importantes.

Answer 5

Je pense que cet article pourrait expliquer une chose ou deux :

http://24ways.org/2010/real-animation-using-javascript-css3-and-html5-video

L'astuce est que vous obtenez un événement sur l'animation de fin de formulaire css (comment cela fonctionne mais vous le faites). Vous pouvez donc l'utiliser pour répéter votre animation ou même l'inverser :)