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

J'ai une animation CSS3 en 4 parties qui joue au clic - mais la dernière partie de l'animation est destinée à la retirer de l'écran.

Cependant, il revient toujours à son état d'origine une fois qu'il a joué. Tout le monde sait comment je peux l' arrêter sur sa dernière image css (100%) , ou comment se débarrasser de toute la div 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); }
}

Vous cherchez:

animation-fill-mode: forwards;

Plus d'informations sur MDN et la liste de support du navigateur sur canIuse .

Si vous souhaitez ajouter ce comportement à une animationdéfinition de propriété abrégée , l'ordre des sous-propriétés est le suivant

animation-name- par défaut none

animation-duration- par défaut 0s

animation-timing-function- par défaut ease

animation-delay- par défaut 0s

animation-iteration-count- par défaut 1

animation-direction- par défaut normal

animation-fill-mode- vous devez régler ceci sur forwards

animation-play-state- par défaut running

Par conséquent, dans le cas le plus courant, le résultat sera quelque chose comme ça

animation: colorchange 1s ease 0s 1 normal forwards;

Consultez la documentation MDN ici

-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;

Prise en charge du navigateur

• Chrome 43.0 (4.0 -webkit-)
• IE 10.0
• Mozilla 16.0 (5,0 -moz-)
• Shafari 4.0 -webkit-
• Opera 15.0 -webkit- (12.112.0 -o-)

Usage:-

.fadeIn {
  animation-name: fadeIn;
    -webkit-animation-name: fadeIn;

    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;

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


@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

La meilleure façon semble de placer l'état final dans la partie principale du css. Comme ici, j'ai mis la largeur à 220px, pour qu'elle devienne enfin 220px. Mais commencer à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;}
}  

Votre problème n'est-il pas que vous définissez le webkitAnimationName sur rien afin de réinitialiser le CSS de votre objet à son état par défaut. Ne restera-t-il pas là où il s'est terminé si vous supprimez simplement la fonction setTimeout qui réinitialise l'état?

Je viens de publier une réponse similaire, et vous voudrez probablement jeter un œil à:

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

Vous pouvez découvrir des aspects d'une animation, tels que le démarrage et l'arrêt, puis, une fois que l'événement «stop» s'est déclenché, vous pouvez faire ce que vous voulez au dom. J'ai essayé cela il y a quelque temps, et cela peut fonctionner, mais je suppose que vous allez être limité au webkit pour le moment (mais vous l'avez probablement déjà accepté). Btw, depuis que j'ai posté le même lien pour 2 réponses, j'offrirais ce conseil général: consultez le W3C - ils écrivent à peu près les règles et décrivent les normes. En outre, les pages de développement du kit Web sont assez importantes.

Personne ne l'a vraiment apporté, la façon dont il a été fait pour fonctionner est que l' état de lecture de l'animation est mis en pause.

J'ai appris aujourd'hui qu'il y a une limite que vous souhaitez utiliser pour le mode de remplissage. Cela vient d'un développeur Apple. La rumeur est * autour * de six, mais pas certaine. Vous pouvez également définir l'état initial de votre classe sur la façon dont vous souhaitez que l'animation se termine, puis * l'initialiser * à partir de / 0%.