我该如何在Javascript中设置CSS关键帧？

Question

我有一个以下显示的CSS关键帧，我的问题是我想将其设置为JavaScript（放在已经有一些功能的div中），以便我可以将“element”值返回到我的函数。

我有以下CSS关键帧，我的问题是我想将其转化为JavaScript（嵌入到已有某些功能的div中），这样我就可以将“element”的值返回给我的函数。

.cylon-eye {
  background-color: yellow;
  background-image: linear-gradient( to right, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.9) 75%);
  color: none;
  height: 100%;
  width: 20%;
  animation: 4s linear 0s infinite alternate move-eye;
}
@keyframes move-eye {
  from {
    margin-left: -20%;
  }
  to {
    margin-left: 100%;
  }
}

我已尝试按建议进行以下转换，那么我应该调用的返回值是var cylon-eye = document.getElementById("cylon-eye")吗？

<script type="text/javascript">
function appendStyle(styles) {
var css = document.createElement('style');
css.type = 'text/css';

if (css.styleSheet) css.styleSheet.cssText = styles;
else css.appendChild(document.createTextNode(styles));

document.getElementsByTagName("head")[0].appendChild(css);

}

var styles = '#cylon-eye { background-color: yellow; background-image: linear-gradient(to right,rgba(255,255,255, 0.9) 25%,rgba(255,255,255, 0.1) 50%,rgba(255,255,255, 0.9) 75%); color: none; height: 100%; width: 20%;animation: 4s linear 0s infinite alternate move-eye; z-index: 10;}';
var keyFrames = '\
@keyframes move-eye {\
  from {\
    margin-left: -20%;\
  }\

  to {\
    margin-left: 100%;\
  }\
}';

window.onload = function() { appendStyle(styles) };
</script>

- Ivy Hoo Hui En

---

@lvy Hoo Hui En，我在https://dev59.com/CFIH5IYBdhLWcg3wc-Kx#59575227的帖子中分享了两个选项示例，你可以查看那个帖子，希望对你有所帮助。 - ankitkanojia

嗨@ankitkanojia，感谢您的建议和编码。如果我想将颜色返回到我创建的框中，我只需要“return element;”对吗？ - Ivy Hoo Hui En

@lvy Hoo Hui En，是的，你可以返回，但在你的示例中需要为DOM中动态创建的元素提供一个id。否则，你可以参考https://dev59.com/QGw15IYBdhLWcg3w4_xL#6338234帖子以更好地理解，如果还需要其他帮助，请告诉我。谢谢！ - ankitkanojia

Answer 1

2022解决方案

现在可以像这个例子一样使用.animate()方法了。

document.getElementById("tunnel").animate([
  // key frames
  { transform: 'translateY(0px)' },
  { transform: 'translateY(-300px)' }
], {
  // sync options
  duration: 1000,
  iterations: Infinity
});

文档：

• https://developer.mozilla.org/zh-CN/docs/Web/API/Element/animate
• https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API/Keyframe_Formats（闪烁效果示例）

- Adrian Lopez

---

我该如何使用这个设置@keyframes scroll？ - Jack

Answer 2

让我分享两个片段，一个使用CSS + javascript，另一个仅使用javascript，您可以使用您喜欢的任何一种。希望对您有所帮助。

使用javascript

let dynamicStyles = null;

function addAnimation(body) {
  if (!dynamicStyles) {
    dynamicStyles = document.createElement('style');
    dynamicStyles.type = 'text/css';
    document.head.appendChild(dynamicStyles);
  }

  dynamicStyles.sheet.insertRule(body, dynamicStyles.length);
}

addAnimation(`
      @keyframes move-eye { 
         from {
           margin-left: -20%;
         }
        to {
          margin-left: 100%;
        }
      }
    `);



var element = document.createElement("div");
element.className = "cylon-eye";
element.style.height = "50px";
element.style.width = "50px";
element.style.backgroundImage = "linear-gradient(to right,rgba(255, 0, 0, 0.1) 25%,rgba(255, 0, 0) 50%,rgba(255, 0, 0, 0.1) 75%)";
element.style.animation = "4s linear 0s infinite alternate move-eye";

document.body.appendChild(element);

使用CSS + JavaScript

var element = document.createElement("div");
element.className = "cylon-eye";
element.style.height = "50px";
element.style.width = "50px";
document.body.appendChild(element);

.cylon-eye {
  background-color: yellow;
  background-image: linear-gradient(to right, rgba(255, 0, 0, 0.9) 25%, rgba(255, 0, 0, 0.1) 50%, rgba(255, 0, 0, 0.9) 75%);
  color: none;
  height: 100%;
  width: 20%;
  animation: 4s linear 0s infinite alternate move-eye;
}

@keyframes move-eye {
  from {
    margin-left: -20%;
  }
  to {
    margin-left: 100%;
  }
}

- ankitkanojia

---

前者在我的情况下无法在Chromium上工作。后者并没有真正添加（或修改，如我所需）keyframes。 - kavadias

Answer 3

你尝试过使用<style></style>标签吗？

例如：

const loading = document.querySelector('.loading');
const keyFrames = document.createElement("style");

keyFrames.innerHTML = `
  @keyframes loading {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .loading {
    animation: loading 1s ease infinite;
  }
`;

loading.appendChild(keyFrames);

.loading {
  width: 100px;
  height: 100px;
  background-size: cover;
  background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.24ways.org%2F2009%2F15%2Fassets%2Fimg%2Fspinner.png&f=1&nofb=1');
  background-repeat: no-repeat;
}

<!doctype html>
<html>
  <head>
    <title>Keyframes in js</title>
  </head>
  <body>
    <div class="loading"></div>
  </body>
</html>

- Joimee Cajandab

---

我认为更合理的是 document.head.appendChild(keyFrames);。 - kavadias

这对于我在Firefox和Cromium上运行，并且在多次修改keyFrames（onResize）时也有效。 - kavadias

Answer 4

这对我来说很有效，希望能帮到你 :)

var style = document.createElement('style');
style.type = 'text/css';
var keyFrames = '\
@keyframes slidein {\
  from {\
    margin-left: 100%;\
    width: 300%; \
  }\

  to {\
    margin-left: 0%;\
    width: 100%;\
  }\
}';

document.getElementsById('slideDiv')[0].appendChild(style);

- Praveen Vishnu

---

请使用https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Template_literals。 - Martijn

关键帧可以是const，因为它从不改变。 - Martijn

你不觉得keyFrames应该与style有所关联吗？ - kavadias

Answer 5

使用本地API功能来改变CSSStyleSheets是明智的选择。您可以使用以下方法访问现有的样式表：

document.styleSheets[0].cssRules

这将返回所有已应用的规则，您可以编辑与您的selector匹配的selectorText的规则

- BRO_THOM