Javascript / CSS - CSS 动画后的旋转

Question

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

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

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

我只想触发一个 animejs 动画，它总是从当前状态平滑地移动到 -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，它会启动无限 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>

Javascript / CSS - CSS 动画后的旋转

Javascript / CSS - Rotation after CSS animation

javascript

css

animation

rotation