如何使用纯Javascript操作CSS和控制并发关键帧动画

Question

尝试使用关键帧和JavaScript创建3D卡窥视动画时遇到一些问题。我希望对它们每个提出一些建议。

第一个问题是，如果不使卡垂直设置的背景图像方向变松，我就无法使div从底部到顶部垂直弯曲。我只能通过将div左右弯曲来保持图像方向。在不丢失图像方向的情况下完成垂直弯曲的合适方法是什么？

第二个问题是控制关键帧动画。目的是弯曲卡并露出卡的正面以供在鼠标向下查看时使用，并反转动画以在鼠标向上再次优雅地隐藏。 css包含复合关键帧动画，这些动画在页面加载时同时运行，但是，当尝试添加javascript来使用鼠标按下和鼠标向上功能控制动画时，该css会同时运行。我得到不良结果。

我创建了两个类（.peek和.hidden）来简化动画的控制，但是第二个名为“ divBend1”的动画（从第58行激活）仅在页面加载时运行。它需要与“ divBend0动画”同时运行，该动画从第22行被激活，同时发生鼠标上移和下移事件，以露出和隐藏卡面。使这些动画向前和向后同步的最佳方法是什么？

我将不胜感激。

document.getElementById("flip").onmousedown = function() {
  mouseDown()
};
document.getElementById("flip").onmouseup = function() {
  mouseUp()
};

function mouseDown() {
  document.getElementById("flip").classList.remove("peek");
  document.getElementById("flip").classList.add("hidden");
}

function mouseUp() {
  document.getElementById("flip").classList.remove("hidden");
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  background: radial-gradient(#222225, #222222);
  perspective: 1000px;
  margin: 0;
}

#flip {
  /*animation: divBend0 1.5s ease-in-out 1;*/
  /*commented this line out to relinquish control to javascript*/
  height: 450px;
  width: 253px;
  position: absolute;
  left: 45%;
  top: 20%;
  transform: translateZ(0px) rotateX(0deg) rotateZ(0deg) rotateY(-0deg)!important;
  transform-style: preserve-3d;
  transform-origin: 0 200px 0;
}

.peek {
  animation: divBend0 1.5s ease-in-out paused 1;
}

.hidden {
  animation: divBend0 1.5s ease-in-out forwards .5;
  /* playing half the animation, would like to reverse from this point on mouse up */
}

@keyframes divBend0 {
  50% {
    transform: translateZ(0) rotateX(15deg) rotateZ(15deg) rotateY(-50deg);
  }
}

#flip div {
  height: 450px;
  width: 24px;
  position: absolute;
  left: calc(100% - 1px);
  transform-origin: 0% 100%;
  transform-style: preserve-3d;
  background-size: 253px 450px;
}

#flip #front,
#flip #front div {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/Card_back_05.svg/1280px-Card_back_05.svg.png);
}

#flip #front>div>div>div>div>div>div>div>div>div>div {}

#flip #back {
  transform: rotateY(.4deg);
  transform-origin: -100% 0;
}


/* avoid pages overlap */

#flip #back,
#flip #back div {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/KS.svg/1920px-KS.svg.png);
}

#flip>div {
  left: 0;
  background-position-x: 0;
}

#flip div>div {
  background-position-x: -23px;
}

#flip div>div>div {
  background-position-x: -46px;
  ;
}

#flip div>div>div>div {
  background-position-x: -69px;
  /* animation: divBend1 1.5s ease-in-out forwards .5 */
  /*uncomment to see results*/
}

#flip div>div>div>div>div {
  background-position-x: -92px;
}

#flip div>div>div>div>div>div {
  background-position-x: -115px;
}

#flip div>div>div>div>div>div>div {
  background-position-x: -138px;
}

#flip div>div>div>div>div>div>div>div {
  background-position-x: -161px;
}

#flip div>div>div>div>div>div>div>div>div {
  background-position-x: -184px;
}

#flip div>div>div>div>div>div>div>div>div>div {
  background-position-x: -207px;
}

#flip div>div>div>div>div>div>div>div>div>div>div {
  background-position-x: -229px;
}


/* the more pieces you have, the smoother the bend is */

@keyframes divBend1 {
  50% {
    transform: rotateY(-13deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

<div id="flip">
  <div id="front">
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div>
                    <div>
                      <div></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="back">
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div>
                    <div>
                      <div></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>