CSS Opazität Animation ändert die Position?

Question

Ändert die CSS-Animationseigenschaft, wenn sie zum Ändern der Deckkraft verwendet wird, auch die Position eines Elements? Wenn ja, was passiert im DOM, das dies ermöglicht und wie kann es ausgeglichen werden?

Kontext: Ich habe einen Javascript-EventListener zu einer Reihe von Bildern hinzugefügt, die beim Anklicken eine Funktion aufrufen, die eine CSS-Animation initiiert und das angeklickte Bild ausblendet. Es wird auch ein Timer gesetzt, der eine CSS-Klasse entfernt und dadurch das angeklickte Bild von Deckkraft 0 auf Deckkraft 1 zurückstellt. Alles funktioniert gut, außer dass das Bild etwas nach links und oben wieder erscheint, wo ich es ursprünglich platziert habe und wo ich es haben möchte Sein. Derselbe unerwünschte Effekt tritt sowohl in Chrome als auch in Safari auf.

Hier ist die CSS:

.hiddenanimal { 
    animation: animalfade 1s; 
    animation-fill-mode: forwards; 
} 

@keyframes animalfade { 
    from { opacity: 1; 
    } to { opacity: 0; 
    } 
} 

Answer 1

Einfache Antwort: Eine CSS-Animation wird nur Werte ändern Sie es erzählen. In Ihrem Beispiel:

@keyframes animalfade { 
    from {opacity: 1;} to {opacity: 0;} 
} 

Das einzige, was ändern wird, ist die opacity.

Wenn sich Ihr Element bewegt, geschieht etwas anderes und möglicherweise auch nicht das Element mit der Animation.

Sie fragen, was im DOM vor sich geht. Technisch: nichts. Die CSS-Werte ändern sich im Laufe der Zeit, nicht das DOM.

Ein besseres Beispiel würde anderen helfen, Ihre Frage besser zu beantworten. Ich habe Annahmen gemacht und habe keine Ahnung, ob meine Antwort auch nur annähernd dem entspricht, was Sie wissen wollen. Wenn Sie Ihre Frage aktualisieren können, um etwas HTML und JavaScript einzuschließen, kann ich meine Antwort ändern.