Beibehaltung des Endzustands am Ende einer CSS-Animation

Question

Ich führe eine Animation auf einigen Elementen aus, die auf opacity: 0; im CSS. Die Animationsklasse wird onClick angewendet und ändert die Deckkraft mithilfe von Keyframes von 0 a 1 (u.a.).

Wenn die Animation zu Ende ist, werden die Elemente leider wieder zu opacity: 0 (sowohl in Firefox als auch in Chrome). Mein natürlicher Gedanke wäre, dass animierte Elemente den endgültigen Zustand beibehalten und ihre ursprünglichen Eigenschaften außer Kraft setzen. Ist dies nicht der Fall? Und wenn nicht, wie kann ich das Element dazu bringen, dies zu tun?

Der Code (vorangestellte 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; }
}

Answer 1

Versuchen Sie animation-fill-mode: forwards; . Die Abkürzung würde zum Beispiel so verwendet werden:

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

Answer 2

Wenn Sie mehr Animationsattribute verwenden, wird die Kurzschrift ist:

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

Dies ergibt:

• bubble Animationsname
• 2s Dauer
• linear Zeitfunktion
• 0.5s Verzögerung
• 1 Iterationszählung (kann sein ' infinite ')
• normal Richtung
• forwards fill-mode (stellen Sie 'backwards' ein, wenn Sie die Kompatibilität haben wollen, um die Endposition als Endzustand zu verwenden [dies ist zur Unterstützung von Browsern, die Animationen ausgeschaltet haben] {und um nur den Titel zu beantworten, und nicht Ihren speziellen Fall})

Verfügbare Timing-Funktionen:

ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end

Verfügbare Richtungen

normal | reverse | alternate | alternate-reverse

Answer 3

WENN SIE NICHT DIE KURZVERSION VERWENDEN: Stellen Sie sicher, dass die animation-fill-mode: forwards es NACH die Erklärung zur Animation, sonst funktioniert sie nicht...

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

gegen

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

Answer 4

Verwenden Sie animation-fill-mode: vorwärts;

animation-fill-mode: forwards;

Das Element behält die Stilwerte des letzten Keyframes bei (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>

Answer 5

Ich hatte ein Problem mit forwards Zumindest in Chrome verbrauchte der Renderer auch nach Beendigung der Animation noch Grafikressourcen, wodurch die Anwendung weniger schnell reagierte.

Ein Ansatz, bei dem diese Probleme nicht auftreten, ist die Verwendung einer EventListener .

CSS-Animationen senden Ereignisse aus, so dass Sie die zu animieren. Ereignis, um einzugreifen, wenn die Animation endet.

CSS

.fade_in {
  animation: fadeIn 2s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

JavaScript

const element = document.getElementById("element-to-be-animated");

element.addEventListener("animationend", () => {
    // Set your final state here. For example:
    element.style["opacity"] = 1;
}, { once: true });

Die Option once: true weist die Engine an, den Ereignis-Listener nach seiner Ausführung zu entfernen, damit Ihre Anwendung frisch und sauber bleibt.

Ich habe eine JSFiddle um zu zeigen, wie es funktioniert.