web-dev-qa-db-fra.com

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

J'ai une animation CSS3 en 4 parties jouée par clic - mais la dernière partie de l'animation est censée l'enlever de l'écran.

Cependant, il revient toujours à son état d'origine une fois qu'il a été joué. Tout le monde sait comment je peux arrêtez-le sur sa dernière image css (100%), ou bien comment vous en débarrasser une fois qu'il est 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); }
}
csscss3css-animations
161
user531192

Vous cherchez:

animation-fill-mode: forwards;

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

347
methodofaction

Si vous souhaitez ajouter ce comportement à une définition abrégée de la propriété animation, 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 définir ce paramètre sur forwards

animation-play-state - par défaut running

Par conséquent, dans le cas le plus courant, le résultat sera comme ceci

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

Voir le documentation MDN ici

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

Support du navigateur

  • Chrome 43.0 (4.0 -webkit-)
  • IE 10.
  • Mozilla 16.0 (5.0 -moz-)
  • Shafari 4.0 -webkit-
  • Opera 15.0 -webkit12.112.0 -o-)

--- (Utilisation: -

.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;
  }
}
13
Hitesh Sahu

La meilleure façon semble mettre l'état final à la partie principale de css. Comme ici, je mets la largeur à 220px pour qu'elle devienne 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;}
}
5
Optimus Prime

Votre problème n'est-il pas que vous définissiez la propriété webkitAnimationName à rien; vous réinitialisez ainsi le CSS de votre objet à son état par défaut. Ne restera-t-il pas là où il a abouti si vous supprimez simplement la fonction setTimeout qui réinitialise l'état?

3
jfriend00

Je viens de poster une réponse similaire, et vous voulez probablement jeter un oeil à:

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

Vous pouvez connaître les aspects d'une animation, tels que démarrer et arrêter, puis, une fois que l'événement 'stop' a été déclenché, vous pouvez faire ce que vous voulez pour le 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). Btw, puisque j'ai posté le même lien pour 2 réponses, je voudrais offrir 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 de Webkit sont très importantes.

1
Jesse

Personne ne l’a apporté ainsi, la façon dont il a été conçu pour fonctionner est animation-play-state réglé sur pause.

0
Marco