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


181

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

Hey Nick, pouvez-vous publier le CSS et le HTML que vous utilisez?
Sebastian Patane Masuelli

Salut Sebastian, j'ai mis à jour ma question avec le css et javascript. Le seul html que j'utilise est un div avec un clic pour démarrer la fonction de rotation.
user531192

Réponses:


376

Vous cherchez:

animation-fill-mode: forwards;

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


8
Savez-vous si cela fonctionne dans Chrome?
Je n'ai

4
Veuillez accepter ceci comme la bonne réponse. Plus d'explications sur celui-ci: 4waisenkinder.de/blog/2014/10/13/…
miron

@ user531192 Pour les navigateurs Chrome / Webkit, vous devez utiliser -webkit-animation-fill-mode: forwards;
eivindml

Chrome n'a plus besoin du préfixe -webkit- maintenant (au moins à partir de la v49)
Capsule

1
Un problème que j'ai eu avec cela était que je n'avais pas de jeu 100% {}ou de to {}jeu, donc même avec animation-fill-mode: forwards;mon animation, je me vidais toujours 0%. (J'utilisais des boucles @for pour créer mes animations et j'ai oublié d'ajouter manuellement un from{}et to{});
Phil Tune

25

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


19
-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;
  }
}

5

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

C'est génial, la meilleure façon de traiter ce problème, je pense.
Drew Baker

Si vous utilisez un retard d'animation, il commence par l'état final, se réinitialise à 0%, puis s'anime à 100%. Pas idéal et visuellement choquant.
Deborah

3

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?


1

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.



-2

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%.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.