如何使用Javascript更改css的关键帧值?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (31)

有没有办法用Javascript更改@keyframes(CSS)的值(我在使用Jquery)

为了使它更清楚一点,我在我的CSS文件中有如下内容:

@keyframes bg {
  50% { background: #3b99fcff; }
}

.pie::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 50%; height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  transform-origin: left;
  animation: spin 50s linear infinite,
             bg 100s step-end infinite;
  animation-play-state: paused;
  animation-delay: inherit;
}

我想用jQuery更改“background”。

提问于
用户回答回答于

你可以用CSS变量并更改:

setTimeout(() => {
  console.log("changing");
  document.getElementById("fizz").style.setProperty("--foo", "green");
}, 2000);
:root {
  --foo: blue;
}

@keyframes hello {
  from {
    background-color: yellow;
  }
  to {
    background-color: var(--foo);
  }
}

#fizz {
  height: 1em;
  animation: 1s infinite alternate hello;
}
<div id="fizz">
  <div>

扫码关注云+社区

领取腾讯云代金券