如何在javascript中制作css代码？

Question

使用这个 CSS，我制作了三个 div 的动画，所述动画包括将第二个 div 放在第一个 div 的顶部，将第一个 div 传递回去并将第三个 div 移动到第二个位置，从而显示所有 div减一。

html, body { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; }
.card{
  position: absolute;
  transform: scale(0.75);
  height:200px;
  width:300px;
  animation-name: cards-animation;
  animation-iteration-count:infinite;
  animation-duration: 6s;
}
.card-blue{
  background-color:blue;
  animation-delay: 1s;
} 
.card-red{
  background-color:red;
  animation-delay: 3s;
}
.card-green{
  background-color:green;
  animation-delay: 5s;
}

@keyframes cards-animation {
  0%  {
    transform: scale(0.75) ;
    z-index: 0;
  }
  9% {
    transform: scale(0.9) translateY(40px);
    z-index: 2;
  }
  33% {
    transform: scale(0.9) translateY(40px);
    z-index: 2;
  }
  42% {
    transform: translateY(80px);
    z-index: 3;
  } 
  66% {
    transform: translateY(80px);
    z-index: 3;
    opacity: 1;
  }
  75% {
    transform: translateY(130px);
    opacity: 0;
  }
  80% {
    transform: scale(0.75) translateY(40px);
    opacity: 0;
    z-index: 1;
  } 
  90% {
    transform: scale(0.75);
    opacity: 1;
    z-index: 1;
  }
}

<div class="card card-blue"></div>
<div class="card card-red"></div>
<div class="card card-green"></div>

我需要知道如何将制作该动画的 CSS 代码传递给 Javascript 代码，我的意思是拥有相同的动画，但不是使用 CSS，而是使用 Javascript 来获得更多控制权在它上面。

<div class="card card-blue"></div>
<div class="card card-red"></div>
<div class="card card-green"></div>

Answer 1

理论上，Javascript 可以做 css 可以做的任何事情——在大多数情况下，它只是做了很多（很多）工作。对于动画，您需要的工具是window.requestAnimationFrame(callback) - 这允许您将动画任务排队等待下一个渲染帧。通过递归调用window.requestAnimationFrame，您可以对每一帧执行更新，并通过使用performance.now() 来测量您可以基于实时执行更新的时间。

例如，让我们使用window.requestAnimationFrame、performance.now 和Math.sin 为left 属性设置动画：

let applyLeftSinAnimation = (item, hz, px) => {
  
  // `hz` controls oscillations per second
  // `px` controls oscillation magnitude in pixels

  // Returning `result` from this function provides a way to stop the
  // animation:
  // let controlAnim = applyLeftSinAnimation(someElem);
  // controlAnim.stop(); // Stops the animation
  let result = {
    active: true,
    stop: () => result.active = false
  };
  
  // Get initial time
  let ms = performance.now();
  
  // We can compile a number of factors into a single coefficient
  let sinMult = Math.PI * 2 * hz * (1/1000);
  
  // Add an async animation loop to the event loop
  (async () => {
    
    while (result.active) {
      
      // Wait for the next animation frame to be ready
      await new Promise(r => window.requestAnimationFrame(r));
      
      // Get millisecond delta
      let dms = performance.now() - ms;
      
      // Apply custom animation based on millisecond delta
      item.style.left = (px * Math.sin(dms * sinMult)).toFixed(2) + 'px';
      
    }
    
  })();
  
  return result;
  
};

applyLeftSinAnimation(document.querySelector('.item'), 1, 100);

html, body { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; }
.item {
  position: absolute;
  left: 0; top: 50%; margin-left: 50%; margin-top: -25px;
  width: 50px; height: 50px;
  box-shadow: inset 0 0 0 1px #000;
}

<div class="item"></div>

Answer 2

 var elems = document.getElementsByClassName('item');
        var countItem = 1;
        var totalSecond = 0;
        myFunction();
        function myFunction() {
            for (var i = 0; i < countItem; i++) {

                var transY = parseFloat(elems[i].getAttribute("transy"));
                var margin = parseFloat(elems[i].getAttribute("margin"));
                var get = elems[i].getAttribute("get");
                if (get === "n") {
                    transY = transY + 1;
                    margin = margin + 1;

                    if (transY >= 100 && transY < 130)
                        zindex = "1";
                    else if (transY >= 130 && transY < 160)
                        zindex = "2";
                    else if (transY >= 160 && transY <= 190)
                        zindex = "3";
                }
                else {
                    transY = 100;
                    margin = margin - 2;

                    if (margin < 0) {
                        if (get === "n") {
                            elems[i].setAttribute("get", "r");
                        }
                        else {
                            elems[i].setAttribute("get", "n");
                        }
                    }
                    zindex = "0";
                }

                elems[i].style.width = (transY) + 'px';
                elems[i].style.height = (transY) + 'px';
                elems[i].style.opacity = 1;
                elems[i].style.zIndex = zindex;
                elems[i].style.marginTop = margin + 'px';
                elems[i].style.marginLeft = (transY * .5) + 'px';
                if (transY >= 190) {
                    if (get === "n") {
                        elems[i].setAttribute("get", "r");
                    }
                    else {
                        elems[i].setAttribute("get", "n");
                    }
                }


                elems[i].setAttribute("transy", transY);
                elems[i].setAttribute("margin", margin);




            }
            totalSecond = totalSecond + 20;
            if (totalSecond > 1000) {
                if (countItem < elems.length) {
                    countItem = countItem + 1;
                }
                totalSecond = 0;
                myVar = setTimeout(myFunction, 150);
            }
            else
                myVar = setTimeout(myFunction, 20);
        }

        .item {
            position: absolute;
            top: 20%;
            width: 100px;
            height: 100px;
            box-shadow: inset 0 0 0 1px #000;
            background: white;
            opacity: 1;
            margin-top: 0;
        }

<div style="height:700px;width:300px;background:black;position:relative;margin:auto;">
    <div class="item" transy="100" get="n" margin="0" style="background:blue;opacity:0;"></div>
    <div class="item" transy="100" get="n" margin="0" style="background:green;opacity:0;"></div>

    <div class="item" transy="100" get="n" margin="0" style="background:red;opacity:0;"></div>

</div>