用JavaScript制作CSS动画

我刚刚开始学习JavaScript，正在尝试制作一个模拟时钟。首先，我用css创建了第二个米。然后我尝试将其转换为JavaScript。我不想为此使用任何jQuery或任何其他JS框架

如何在JavaScript中设置css@关键帧？以下是我的CSS代码：

.second{
  height: 5px;
  width: 180px;
  background-color: #aaaaaa;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-animation-name: spin;
  -webkit-animation-duration: 60s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -o-transition: rotate(360deg);
  transform-origin: left center;
  z-index: 3;
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

这个css的js代码

var second = document.querySelector(".second");
      second.style.height = "5px";
      second.style.width = "180px";
      second.style.backgroundColor = "#aaaaaa";
      second.style.borderRadius = "5px";
      second.style.position = "absolute";
      second.style.top = "50%";
      second.style.left = "50%";
      second.style.transformOrigin = "left center";
      second.style.zIndex = "3";

      second.style.webkitAnimationName = "Spin";
      second.style.webkitAnimationDuration = "60s";
      second.style.webkitAnimationIterationCount: "infinite"; //doesn't work
      second.style.webkitAnimationTimingFunction: "linear"; //doesn't work
      second.style.oTransition: "rotate(360deg)"; //doesn't work

---

这可以通过将所需文本（@keyframes旋转规则）附加到文档中的样式标记来实现。我还没有检查是否已经完成，因此多次单击按钮将多次附加规则。它至少需要1个样式标记才能工作，使用的标记是最后一个，最后，如果最后一个样式标记引用了外部文件，则此操作将失败

为了避免这些限制，只需创建一个新的script元素并将其附加到

document.head

元素。您只需要设置一个标志或给标记一个类，以便以后可以找到它并避免添加两次

function allByTag（标记名，父项）{return（父项==未定义？文档：父项）.getElementsByTagName（标记名）；}
函数onStart（）
{
var styleTags=allByTag（'style'）；
var lastStyleElem=styleTags[styleTags.length-1]；
var txt='@关键帧旋转{'+'\n'；
来自{transform:rotate（0deg）；}'+'\n'；
txt+='到{变换：旋转（360度）；}'+'\n'；
txt+='}'+'\n'；
lastStyleElem.innerHTML+=txt；
}

.second{
高度：5px；
宽度：180px；
背景色：#AAAAA；
边界半径：5px；
位置：绝对位置；
最高：50%；
左：50%；
-webkit动画名称：spin；
-webkit动画持续时间：60秒；
-webkit动画迭代计数：无限；
-webkit动画计时功能：线性；
-o型过渡：旋转（360度）；
变换原点：左中心；
z指数：3；
}

开始变换

我想不出为什么要用JavaScript实现这一点，尽管可能会有。我想如果你尝试学习JavaScript，学习真实世界的实践可能会更好。但是如果你必须这样做，我想你可以像这样把它添加到head元素中

var styleElement = document.createElement('style');
styleElement.type = 'text/css';
var props = 
'@-webkit-keyframes spin {' +
  'from {' +
    '-webkit-transform: rotate(0deg);' +
            'transform: rotate(0deg); }' +
  'to {' +
    '-webkit-transform: rotate(360deg);' +
            'transform: rotate(360deg); } }' +
'@keyframes spin {' +
  'from {' +
    '-webkit-transform: rotate(0deg);' +
            'transform: rotate(0deg); }' +
  'to {' +
    '-webkit-transform: rotate(360deg);' +
            'transform: rotate(360deg); } }';
styleElement.appendChild(props);
document.getElementsByTagName("head")[0].appendChild(styleElement);

---

MDN是一个很好的资源，有了动画，你可以在一行上声明很多内容，而不是在5行上分解

动画：旋转60秒无限线性


不确定如何在vanilla javascript中创建关键帧，但如果它们在css中声明，“spin”将应用关键帧

PS如果你想学习香草JavaScript，从计算器开始
 为什么要使用Javascript来实现这一点？这可以单独在css中完成。@MohitBhardwaj也许OP可以在css中完成，只是想学习javascript。@MohitBhardwaj你可以看看requestAnimationFrame（）函数-看看文档是否完成了你编写的工作，如果没有，它是如何工作的？@DavidVotrubec似乎他想要（出于某种未知的原因）以编程方式设置样式，同时继续使用CSS动画，在这种情况下，不需要
rAF
。