如何访问javascript中的关键帧和webkit转换？

Question

我想在Html、Javascript和css中创建一个循环进度条。

这是我的代码：

<div class="progress blue"> <span class="progress-left"> <span class="progress-bar"></span> </span> <span class="progress-right"> <span class="progress-bar"></span> </span>
                  <div class="progress-value">70%</div>
              </div>

@keyframes loading-2 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(50deg);
        transform: rotate(50deg)
    }
}

我找到了对我关于堆叠溢出的问题的以下答案

element.style.webkitTransform = "rotate(-2deg)";

但是我有2个关键帧和2个webkit转换元素，那么如何选择第二个？

我要访问的1是

100% {
        -webkit-transform: rotate(50deg);
        transform: rotate(50deg)
    }

如何在javascript中做到这一点，以便动态地制作进度条？

我试着在这里使用这个答案：How to set the style -webkit-transform dynamically using JavaScript?

但是正如我所说的，我有2个关键帧元素和2个webkit转换元素，我不能用element.style.webkitTransform =“旋转(-2deg)”来访问它们；

Answer 1

你可以用你的参数从你的JavaScript设置一个分类吗？

将此代码放入js中：

document.querySelector(".progress").classList.add(".newClasse")

将这段代码放入css中：

.newClasse {
   -webkit-transform: rotate(0deg);
}