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

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

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

有没有办法用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>

热门问答

树莓派4能够连上腾讯云物联网平台吗?

DylanRichard

腾讯 · 产品经理 (已认证)

万物互联的时代,欢迎来到IoT的世界
推荐

新版乐加固 不支持 64位应用?

Richel码农
推荐
1.麻烦确认应用自身apk中是否存在64位支持库【应用自身不存在64位支持库的话,加固后是肯定不存在的 2.乐固最新版本已适配arm64位,请更新版本或直接在官网进行加固; 3.乐固目前暂时未支持x86-64位,如需上架GooglePlay,需先删除x86支持 ... 展开详请

加固完成后多渠道打包显示androidname not found?

腾讯云@移动安全

腾讯 · 移动开发工程师 (已认证)

腾讯云移动安全前端开发
推荐
多渠道失败是工具的偶现性问题,目前这个问题已经提交技术进行排期解决。用户也可以切换电脑切换账号重新登录工具尝试。 实际上多渠道打包是加固工具的辅助工具,并不影响加固功能,用户可以选择在工具加固完成后自行进行多渠道打包的:https://blog.csdn.net/byongche...... 展开详请

请问微信云支付是否有沙箱环境?

HKC

红客学院 · 创始人 (已认证)

道可道 非常道 名可名 非常名
推荐
微信支付沙箱环境,是提供给微信支付商户的开发者,用于模拟支付及回调通知。以验证商户是否理解回调通知、账单格式,以及是否对异常做了正确的处理。 ◆ 如何对接沙箱环境? 1、修改商户自有程序或配置中,微信支付api的链接,如:被扫支付官网的url为:https://api.mch.w...... 展开详请

tencentcloud-sdk-php-master github代码上没有vendor文件夹?

推荐
因为和composer冲突,因此导出时没有包含vendor目录。如果需要,可以考虑git clone方式拿到,或者到https://cloud.tencent.com/document/sdk/PHP#.E9.80.9A.E8.BF.87.E6.BA.90.E7.A0.81.E5...... 展开详请

织云安装包在哪里下载?

使用织云,必须要满足1、2步骤1、机器要同步到c.isd.com系统。简单讲,就是在c.isd.com上有这台机器(如果c.isd.com没有,而公司的cmdb【cmdb.oa.com】有,则需要同步到c.isd.com即可,同步需要联系zhiyunhelper同步,而没有的话,...... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券