根据父元素使用不同的@keyframes class

Question

我有如下动画：

@keyframes pulseColorGreen {
    0% {
        background-color: green;
    }
    97%{
        background-color: green;
    }
    100% {
      background-color: white;
    }
  }

我的网站也有背景变黑的深色模式。现在在动画中，我想显示更深的绿色，如下所示：

@keyframes pulseColorGreen {
    0% {
        background-color: darkgreen;
    }
    97%{
        background-color: darkgreen;
    }
    100% {
      background-color: black;
    }
  }

对于深色模式，我在正文标签中添加了一个class "lightsOff"。我正在使用目标元素 class 和 "lightsOff" class 的组合来管理所有其他颜色变化，就像：

.lightsOff .someclass{
    color: white
}

但是当在 css 文件中定义一个元素时：

@keyframes .lightsOff pulseColorGreen {
    0% {
        background-color: darkgreen;
    }
    97%{
        background-color: darkgreen;
    }
    100% {
      background-color: black;
    }
  }

它给我错误说 "identifier expected"。我将动画名称属性添加到来自 javascript 的动态元素。因此，我不喜欢更改 JS 代码来识别当前设置的主题并相应地设置关键帧。我怎样才能做到这一点？

Answer 1

您可以使用 CSS 变量，您只需要一个关键帧，您不必更改。只需更改定义颜色的主要 class：

.light {
  --c: yellow;
}

.dark {
  --c: darkblue;
}

.box {
  height: 100px;
  margin: 5px;
  box-shadow: 0 0 5px var(--c);
  color:#fff;
  animation: pulseColorGreenMkt 1s infinite linear alternate;
}

@keyframes pulseColorGreenMkt {
  0% {
    background-color: var(--c);
  }
  100% {
    background-color: black;
  }
}

<div class="box light">
  Class defined on the element
</div>
<div class="dark">
  <div class="box">
    Class defined on a parent element
  </div>
</div>

根据父元素使用不同的@keyframes class

Use different @keyframes based on parent element class

html

css

keyframe

css-animations