De eindstatus aan het einde van een CSS3-animatie behouden

Ik voer een animatie uit op enkele elementen die zijn ingesteld op opacity: 0;in de CSS. De animatieklasse wordt toegepast op Click en verandert met behulp van keyframes de dekking van 0in 1(onder andere).

Helaas, wanneer de animatie voorbij is, gaan de elementen terug naar opacity: 0(in zowel Firefox als Chrome). Mijn natuurlijke gedachte zou zijn dat geanimeerde elementen hun uiteindelijke staat behouden en hun oorspronkelijke eigenschappen opheffen. Is dit niet waar? En zo niet, hoe kan ik het element ertoe brengen dit te doen?

De code (versies met prefix niet inbegrepen):

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

Antwoord 1, autoriteit 100%

Probeer animation-fill-mode: forwards;toe te voegen. Bijvoorbeeld als volgt:

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

Antwoord 2, autoriteit 9%

Als je meer animatie-attributen gebruikt, is de steno:

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

Dit geeft:

• bubbleanimatienaam
• 2sduur
• lineartiming-functie
• 0.5svertraging
• 1iteratie-telling (kan ‘infinite‘ zijn)
• normalrichting
• forwardsvulmodus (stel ‘achteruit’ in als u compatibiliteit wilt hebben om de eindpositie als de laatste staat te gebruiken [dit is om browsers te ondersteunen die animaties hebben uitgeschakeld]{en om te antwoorden alleen de titel, en niet uw specifieke geval})

Antwoord 3, autoriteit 4%

ALS U DE KORTE HANDVERSIE NIET GEBRUIKT:zorg ervoor dat de animation-fill-mode: forwardsNAde animatieverklaring is, anders zal niet werken…

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;

Antwoord 4

Gebruik
animatie-vulmodus: vooruit;

animation-fill-mode: forwards;

Het element behoudt de stijlwaarden die zijn ingesteld door het laatste hoofdframe (afhankelijk van de animatierichting en het aantal animatie-iteraties).

Opmerking: de @keyframes-regel wordt niet ondersteund in Internet Explorer 9 en eerdere versies.

Werkvoorbeeld

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>

.fade_in {
  animation: fadeIn 2s;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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