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

Question

我有一个如下所示的 CSS 关键帧，我的问题是我想将它设置为 JavaScript（放入已经有一些函数的 div），以便我可以将“元素”值返回给我的函数

.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>

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/en-US/docs/Web/API/Element/animate
• https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats（闪烁效果示例）

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%;
  }
}

Answer 3

这对我来说效果很好，希望这会有所帮助:)

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);