Question

想象一下，我想从关键帧中的元素B 更改元素A的动画播放状态属性值，该关键帧引用具有相同名称但具有相同名称的动画的元素示例我想暂停元素B 并运行 A ，并且当 A 动画结束时，然后指向下一个具有相同名称动画的元素，它是元素B ，并在结束元素A 中的动画的同时运行动画。

类似的东西：

.element1 {
  animation: anim 2s infinite 3s alternate both;
}
.element {
  animation: anim 2s infinite 3s alternate pause both;
}

@keyframes anim {
  0% {opacity: 1;}
  100% {
    this-element{ animation-play-state: pause;}
    next-element{ animation-play-state: running;}
  }
}

在纯 CSS 中是否存在类似的内容？另外，不可能使用计数器或变量（例如具有多个标签并为类分配数字）来创建不同元素的选择器，例如

<img class="im1" src="" />
<img class="im2" src="" />

然后做

:root {--imnumber: 0}
div > img:before {--imnumber: calc(--imnumber + 1)}
.im--imnumber {
  some-properties: value;
}

不使用 SASS 或 SCSS 等的纯 CSS 中是否没有类似的东西？我认为 CSS 本身可以通过不需要第三方工具而允许这些东西而变得更好。

Answer 1

不，根据我对您的解释的理解，您无法这样做。似乎您要为一个接一个的元素设置动画？如果您不想使用JS来检测动画何时完成，则可以向每个元素的动画添加延迟，以便在上一个动画完成之前不会开始动画。我有些困惑，为什么要让所有动画设置为无限，如果您希望它们在下一个动画开始时停止播放。

CSS-使用变量从元素B和动态选择器更改元素A的动画播放状态？

1 个答案: