Question

用于更改不透明度的CSS动画属性是否也会更改元素的位置？如果是这样，DOM中发生了什么事情，以及它如何被抵消？

上下文：我已经为一组图像添加了一个Javascript EventListener，点击它时会调用一个函数来启动一个淡化点击图像的CSS动画。还设置了一个计时器，用于删除CSS类，从而将点击的图像从不透明度0返回到不透明度1.除了图像再次出现在我最初放置的位置的左侧和顶部以及我想要的位置之外，一切正常是。 Chrome和Safari都会发生同样不必要的影响。

这是CSS：

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

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

Answer 1

简单回答：CSS动画只会改变你告诉它的值。在您的示例中：

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

唯一会改变的是opacity。

如果你的元素正在移动，那么其他东西正在发生，也许不会出现在带有动画的元素上。

你问DOM中发生了什么。技术上：没有。 CSS值随时间而变化，而不是DOM。

有一个更好的例子可以帮助其他人更好地回答你的问题。我做了一些假设，不知道我的答案是否与你想知道的一致。如果您可以更新您的问题以包含一些HTML和JavaScript，那么我可以修改我的答案。

CSS不透明度动画改变位置？

1 个答案: