Stoppen einer CSS3-Animation im letzten Frame

179

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); }
}
user531192
quelle
Hey Nick, kannst du das CSS und HTML posten, das du verwendest?
Sebastian Patane Masuelli
Hallo Sebastian, ich habe meine Frage mit CSS und Javascript aktualisiert. Das einzige HTML, das ich benutze, ist ein Div mit einem Klick, um die Funktion drehen zu starten.
user531192
Mögliches Duplikat von Kann Animation am Ende eines Zyklus nicht stoppen
MPelletier

Antworten:

373

Du schaust nach:

animation-fill-mode: forwards;

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

Methode der Aktion
quelle
8
Wissen Sie, ob das in Chrom funktioniert? Ich habe kein Glück damit
user531192
4
Bitte akzeptieren Sie dies als die richtige Antwort. Weitere Erklärung zu diesem Thema
miron
@ user531192 Für Chrome / Webkit-Browser müssen Sie -webkit-animation-fill-mode: forwards;
eivindml
Chrome benötigt das Präfix -webkit- jetzt nicht mehr (zumindest ab Version 49)
Capsule
1
Ein Problem, das ich damit hatte, war, dass ich kein 100% {}oder kein to {}Set hatte, so dass animation-fill-mode: forwards;mich selbst mit meiner Animation immer noch auf fallen ließ 0%. (Ich habe einige @ for-Schleifen verwendet, um meine Animationen zu erstellen, und vergessen, ein from{}und manuell hinzuzufügen. to{});
Phil Tune
25

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

davnicwil
quelle
19
-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;
  }
}
Hitesh Sahu
quelle
5

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;}
}  
Optimus Prime
quelle
Das ist großartig, der beste Weg, um mit diesem Problem umzugehen, denke ich.
Drew Baker
3

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?

jfriend00
quelle
1

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.

Jesse
quelle
-2

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

iheartflex
quelle