Stoppen einer CSS3-Animation im letzten Frame

Ich habe eine 4-teilige CSS3-Animation, die per Klick abgespielt wird - aber der letzte Teil der Animation soll sie vom Bildschirm entfernen.

Es kehrt jedoch immer zu seinem ursprünglichen Zustand zurück, sobald es gespielt hat. Jeder weiß, wie ich es auf seinem letzten CSS-Frame (100%) stoppen kann oder wie man das gesamte Div, in dem es sich befindet, loswird, sobald es abgespielt wurde.

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

Du schaust nach:

animation-fill-mode: forwards;

Weitere Informationen zu MDN und zur Browser- Supportliste auf canIuse .

Wenn Sie dieses Verhalten zu einer Kurzform- animationEigenschaftsdefinition hinzufügen möchten, lautet die Reihenfolge der Untereigenschaften wie folgt

animation-name- Standard none

animation-duration- Standard 0s

animation-timing-function- Standard ease

animation-delay- Standard 0s

animation-iteration-count- Standard 1

animation-direction- Standard normal

animation-fill-mode- Sie müssen dies einstellen forwards

animation-play-state- Standard running

Daher ist das Ergebnis im häufigsten Fall ungefähr so

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

Siehe die MDN-Dokumentation hier

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

Browser-Unterstützung

• 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-)

Verwendung:-

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

Der beste Weg scheint, den Endzustand in den Hauptteil von CSS zu stellen. Wie hier setze ich Breite auf 220px, damit es endlich wird 220px. Aber anfangen zu0px;

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

Ist es nicht Ihr Problem, dass Sie den webkitAnimationName auf nichts zurücksetzen, sodass das CSS für Ihr Objekt auf den Standardzustand zurückgesetzt wird? Bleibt es nicht dort, wo es gelandet ist, wenn Sie nur die Funktion setTimeout entfernen, die den Status zurücksetzt?

Ich habe gerade eine ähnliche Antwort gepostet, und Sie möchten sich wahrscheinlich Folgendes ansehen:

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

Sie können Aspekte einer Animation herausfinden, z. B. Start und Stopp. Wenn Sie dann sagen, dass das Stopp-Ereignis ausgelöst wurde, können Sie mit dem Dom tun, was Sie wollen. Ich habe das vor einiger Zeit ausprobiert und es kann funktionieren, aber ich würde vermuten, dass Sie sich vorerst auf das Webkit beschränken werden (aber das haben Sie wahrscheinlich bereits akzeptiert). Übrigens, da ich den gleichen Link für 2 Antworten gepostet habe, würde ich diesen allgemeinen Rat geben: Schauen Sie sich das W3C an - sie schreiben so ziemlich die Regeln und beschreiben die Standards. Auch die Webkit-Entwicklungsseiten sind ziemlich wichtig.

Niemand hat es wirklich so gebracht, die Art und Weise, wie es funktioniert, ist der Animations-Wiedergabe-Zustand , der auf pausiert eingestellt ist.

Ich habe heute erfahren, dass es eine Grenze gibt, die Sie für den Füllmodus verwenden möchten. Dies ist von einem Apple-Entwickler. Das Gerücht ist * um * sechs, aber nicht sicher. Alternativ können Sie den Anfangszustand Ihrer Klasse so einstellen, wie die Animation enden soll, und ihn dann bei / 0% * initialisieren *.