CSS 关键帧旋转动画后旋转不动画

Question

我想要 "chain" 2 css 个动画。第一个在页面加载时播放，是一个 css 动画，将立方体旋转一定程度。作为第二个动画，我想在用户按下按钮时进一步旋转该立方体（添加 class 到立方体 onclick）。

问题是立方体-div 已经有来自第一个动画的旋转语句，所以当我添加 class（其中包含 transform:rotate）时它没有动画到新的旋转但立即跳到新的旋转度数。虽然我使用过渡。

我试图通过添加的 class('.rotate-further') 禁用动画，这样它不会中断第二次旋转但没有帮助

div {
  width: 20px;
  height: 20px;
  background: blue;
  animation: rotate 1s forwards;
}

.rotate-further {
  transform: rotate(150deg);
  animation: none;
}

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

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

我想要的结果是，当您使用 "transition: all .5s" 时，第二个旋转像往常一样动画。

window.setTimeout(function() {
  document.querySelector('div').classList.add('rotate-further');
}, 1500)

div {
  width: 20px;
  height: 20px;
  background: blue;
  animation: rotate 1s forwards;
}

.rotate-further {
  transform: rotate(150deg);
  animation: none;
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg);
  }
}

<div></div>

Answer 1

您可以像下面这样编辑您的代码：

window.setTimeout(function() {
  document.querySelector('div').classList.add('rotate-further');
}, 1500)

div {
  width: 20px;
  height: 20px;
  background: blue;
  animation: rotate 1s;
  transform: rotate(120deg);
  transition:0.5s all
}

.rotate-further {
  transform: rotate(150deg);
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }

}

<div></div>

CSS 关键帧旋转动画后旋转不动画

CSS rotate does not animate after keyframe rotate-animation

css

keyframe

css-transitions

css-animations