Den Endstatus am Ende einer CSS3-Animation beibehalten

177

Ich führe eine Animation für einige Elemente aus, die im CSS auf opacity: 0; eingestellt sind. Die Animationsklasse wird aufClick angewendet und ändert unter Verwendung von Keyframes die Deckkraft von 0 zu 1 (unter anderem).Den Endstatus am Ende einer CSS3-Animation beibehalten

Leider, wenn die Animation vorbei ist, gehen die Elemente zurück zu opacity: 0 (in Firefox und Chrome). Mein natürliches Denken wäre, dass animierte Elemente den endgültigen Zustand beibehalten und ihre ursprünglichen Eigenschaften außer Kraft setzen. Ist das nicht wahr? Und wenn nicht, wie kann ich das Element dazu bekommen?

Der Code (mit dem Präfix-Versionen 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; } 
}

Quelle

2012-10-20 Dan

Ich werde meine eigene Wiederholungshinweis: http://StackOverflow.com/Questions/9196694/Css3-Animation-Scale Zumindest meiner hat einen lehrreichen Titel! – Dan

mögliches Duplikat von [CSS3 Animate: Wie kann das Objekt nicht in seine ursprüngliche Position zurückkehren, nachdem die Animation ausgeführt wurde?] (Http://stackoverflow.com/questions/6897724/css3-animate-how-to-have-the- Objekt-nicht-wieder-zu-der-ursprünglichen-Position-nach-einem) –

300

Try animation-fill-mode: forwards; hinzufügen. Zum Beispiel wie folgt aus:

animation: bubble 1.0s forwards; 
-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */

Quelle

2012-10-20 18:02:03

Yup das ist es. Wird deine Antwort überprüfen, wenn ich kann. Wenn irgendein CSS-Chef die Logik dahinter kommentieren möchte, würde ich es gerne wissen! – Dan

Sie können hier über die Animation-Fill-Mode-Eigenschaft lesen - http://dev.w3.org/csswg/css3-animations/#animation-fill-mode-property Hoffe, dass hilft! –

@Dan der 'forwards'-Wert der Eigenschaft' animation-fill-mode' stellt sicher, dass das Element den letzten Keyframe-Status der Animation nach Beendigung der Animation enthält. Wenn Ihre Animation beispielsweise die Breite von 0 bis 100 Pixel ändert, stellt diese Eigenschaft sicher, dass das Element nach Ende der Animation 100 Pixel breit bleibt. –

Wenn Sie mehr Animation verwenden Attribute der Stenografie ist:

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

für 2s Dauer, lineare Timing-Funktion, 0,5 s Verzögerung, 1 Iteration-count, Normalrichtung , vorwärts Füllmodus

Quelle

2017-01-14 00:28:01 agiopnl

Den Endstatus am Ende einer CSS3-Animation beibehalten

Antwort

Verwandte Themen