Beibehaltung des Endzustands am Ende einer CSS3-Animation

301

Ich führe eine Animation für einige Elemente aus, die opacity: 0;im CSS festgelegt sind. Die Animationsklasse wird auf Click angewendet und ändert mithilfe von Keyframes die Deckkraft von 0unter 1(unter anderem).

Wenn die Animation beendet ist, kehren die Elemente leider zurück zu opacity: 0(sowohl in Firefox als auch in Chrome). Mein natürlicher Gedanke wäre, dass animierte Elemente den Endzustand beibehalten und ihre ursprünglichen Eigenschaften überschreiben. Ist das nicht wahr? Und wenn nicht, wie kann ich das Element dazu bringen?

Der Code (Präfixversionen nicht enthalten):

@keyframes bubble {
    0%   { transform:scale(0.5); opacity:0.0; }
    50%  { transform:scale(1.2); opacity:0.5; }
    100% { transform:scale(1.0); opacity:1.0; }
}
css css-animations Dan
quelle
1
Ich werde meine eigene Wiederholungsnotiz veröffentlichen: stackoverflow.com/questions/9196694/css3-animation-scale Zumindest meine hat einen lehrreicheren Titel!
Dan
Mögliches Duplikat von CSS3 Animate: Wie kann das Objekt nach dem Ausführen der Animation nicht an seine ursprüngliche Position zurückgesetzt werden?
Michael Mullany

Antworten:

528

Versuchen Sie es hinzuzufügen animation-fill-mode: forwards;. Zum Beispiel so:

-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
        animation: bubble 1.0s forwards;
Christofer Vilander
quelle
1
Ja das war's. Ich werde deine Antwort überprüfen, wenn ich kann. Wenn CSS-Köpfe die dahinter stehende Logik kommentieren möchten, würde ich es gerne wissen!
Dan
8
Sie können hier mehr über die Animation- Füllmodus -Eigenschaft lesen - dev.w3.org/csswg/css3-animations/#animation-fill-mode-property Hoffe, das hilft!
Christofer Vilander
6
@Dan Der forwardsWert der animation-fill-modeEigenschaft stellt sicher, dass das Element nach dem Ende der Animation den letzten Keyframe-Status der Animation enthält. Wenn sich Ihre Animation beispielsweise widthvon 0 auf 100 Pixel ändert, stellt diese Eigenschaft sicher, dass das Element nach dem Ende der Animation 100 Pixel breit bleibt.
Farzad YZ
5
Vergessen Sie nicht, den 100% / toPunkt anzugeben , @keyframesonst funktioniert es nicht.
Tomasz Mularczyk
Animations-Füll-Modus: Vorwärts hat der Trick auch für mich getan, aber erst nachdem ich den '! Wichtigen' Imperativ zur Regel
hinzugefügt habe
26

Wenn Sie mehr Animationsattribute verwenden, lautet die Kurzform:

animation: bubble 2s linear 0.5s 1 normal forwards;

Das gibt:

  • 2s Dauer
  • linear Timing-Funktion
  • 0.5s verzögern
  • 1 Iterationszahl (kann unendlich sein)
  • normal Richtung
  • forwards Füllmodus (rückwärts einstellen, wenn Sie die Endposition als Endzustand verwenden möchten)
agiopnl
quelle
14

BEI VERWENDUNG VON NICHT DIE stenografie VERSION: Stellen Sie sicher , das animation-fill-mode: forwardsist AFTER der Animation Erklärung oder es wird nicht funktionieren ...

animation-fill-mode: forwards;
animation-name: appear;
animation-duration: 1s;
animation-delay: 1s;

vs.

animation-name: appear;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;
Taylor A. Leach
quelle
1
Du hast recht. Meine Antwort wurde aktualisiert. Danke, es ist mir durch den Kopf gegangen, haha.
Taylor A. Leach
4

Verwenden Sie den Animationsfüllmodus: vorwärts;

animation-fill-mode: forwards;

Das Element behält die Stilwerte bei, die vom letzten Keyframe festgelegt wurden (abhängig von der Animationsrichtung und der Anzahl der Animationsiterationen).

Hinweis: Die @ keyframes-Regel wird in Internet Explorer 9 und früheren Versionen nicht unterstützt.

Arbeitsbeispiel

div {
  width: 100px;
  height: 100px;
  background: red;
  position :relative;
  -webkit-animation: mymove 3ss forwards; /* Safari 4.0 - 8.0 */
  animation: bubble 3s forwards;
  /* animation-name: bubble; 
  animation-duration: 3s;
  animation-fill-mode: forwards; */
}

/* Safari */
@-webkit-keyframes bubble  {
  0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}

/* Standard syntax */
@keyframes bubble  {
   0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}
<h1>The keyframes </h1>
<div></div>
Erweitern Sie das Snippet

Deepu Reghunath
quelle