CSS不透明动画改变位置

Question

用于更改不透明度时CSS动画属性是否也会更改元素的位置？如果是这样，导致这种情况的DOM发生了什么，如何被抵消？

上下文：我已经在一组图像中添加了一个JavaScript EventListener，当单击时，该图像调用启动CSS动画片段的函数，从而褪色了单击的图像。还设置了一个计时器，该计时器删除了CSS类，从而将单击的图像从不透明度0返回到不透明度1。一切都很好，除了该图像重新出现在我最初放置的位置以及我希望它的位置稍微偏移到左侧和顶部。是。同样的不良效果对铬和野生动物园都会发生。

这是CSS：

.hiddenanimal { 
    animation: animalfade 1s;
    animation-fill-mode: forwards;
}
@keyframes animalfade {
    from { opacity: 1; 
    } to {  opacity: 0; 
    }
}

Answer 1

简单答案：a css动画只会更改您告诉它的值。在您的示例中：

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

唯一会改变的是opacity。

如果您的元素正在移动，则正在发生其他事情，也许没有动画的元素。

您询问DOM中发生了什么。从技术上讲：什么都没有。CSS值随着时间的流逝而不是DOM。

有一个更好的例子将有助于他人能够更好地回答您的问题。我已经做出了假设，不知道我的答案甚至与您想知道的内容接近。如果您可以更新您的问题以包括一些HTML和JavaScript，那么我可以修改答案。