CSS 值变化触发的 CSS 动画

Question

CSS transition 可用于在所述属性更改时触发 CSS 属性的动画。 CSS animation 可用于同时为多个属性设置动画。

有没有办法将它们结合起来，以便当某些 CSS 属性发生变化时，它不仅会触发自身的动画，还会触发其他属性的动画？

我的具体用例如下：我有一堆小图像组合成一个大图像，我使用

object-position

来显示它的各个部分。我想创建一个 CSS 动画，这样当我更改

object-position

时，图像的

opacity

将首先变为 0%，然后

object-position

将发生变化，然后

opacity

将返回到 100% .我可以很容易地将其制定为动画，但我不知道如何从

object-position

变化中触发它。

Answer 1

在 css 中真的没有这样的方式。

你可以做的是用 JS 分配类来触发这些动画。为此，您需要创建一个

DOMAttrModified

事件监听器。