Javascript / CSS - CSS 动画后的旋转

Question

我现在正在搞乱 CSS 动画，我遇到了我不理解的这种行为。

我有一个 div 容器，我在其中设置了一个无限的 CSS 动画。动画只会来回旋转 div。在任何给定点，我都想手动将 div 的旋转调整为特定的绝对角度（在我的情况下为 -90 度）。

我遇到的问题是，每当我（或animejs）在CSS动画开始后尝试将旋转设置为固定的-90度时，以下旋转在某种程度上取决于CSS动画的变化。我之前也尝试过暂停 CSS 动画，但没有成功。

我只想触发一个总是从当前状态平滑到 -90 度的动画动画（由 CSS 动画给出）。

下面是我所说的一个例子：

var div = document.getElementById('testdiv');

document.addEventListener('keypress', function onPress(event) {
    div.style.animationPlayState = 'paused';

    if (event.key == 'q') {
      div.style.transform = 'rotate(-90deg)'; 
    }

    if(event.key == 'e') {
      div.style.transform = 'rotate(180deg)'; 
    }

    if(event.key == 's') {
      div.style.animationPlayState = 'running';
    }
});

@keyframes animation {
    to {
        transform: rotate(15deg); 
    }
}

#testdiv {
    position: absolute;
    background-color: black;   
    margin: auto;
    margin-top: 50px;
    width: 200px;
    height: 150px;

    animation-name: animation;
    animation-duration: 1s;  
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-play-state: paused;
}

<div id="testdiv"></div>

https://jsfiddle.net/Ls1ytf4h/

<div id="testdiv"></div>

如果您运行它并在初始状态下按 Q 或 E，它会将其旋转更改为 -90 或 180 度。如果按 S，它将启动 inifite CSS 动画。动画开始后，再次按 Q 或 E（从 Q 到 E 多次切换以查看差异）。 如您所见，它不会回到绝对 -90 度。它似乎相对于某些东西起作用，但我不知道是什么。当我尝试从当前状态平稳地转到 -90 度时，animejs 以同样奇怪的方式工作。

有没有办法避免这种行为？

顺便说一句。是我在这里的第一个问题，所以我希望我没有做错什么；）

亲切的问候！

Answer 1

试试这个：

var div = document.getElementById('testdiv');

document.addEventListener('keypress', function onPress(event) {
    div.style.animationPlayState = 'paused';
    div.style.animationName = 'none';

    if (event.key == 'q') {
      div.style.transform = 'rotate(-90deg)'; 
    }

    if(event.key == 'e') {
      div.style.transform = 'rotate(180deg)'; 
    }

    if(event.key == 's') {
      div.style.animationName = 'animation';
      div.style.animationPlayState = 'running';
    }
});

@keyframes animation {
    to {
        transform: rotate(15deg); 
    }
}

#testdiv {
    position: absolute;
    background-color: black;   
    margin: auto;
    margin-top: 50px;
    width: 200px;
    height: 150px;

    animation-name: animation;
    animation-duration: 1s;  
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-play-state: paused;
}

<div id="testdiv"></div>