使用jQuery更改css的关键帧值
使用jQuery更改css的关键帧值
提问于 2018-07-06 08:04:46
有没有办法用jQuery改变@keyframe (CSS)的值？
为了更清楚一点，我在我的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改变“背景”
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-06 08:16:22
您可以使用CSS variable并将其更改为：
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51201417
复制相关文章
相似问题