CSS旋转不会在关键帧旋转动画之后设置动画

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

问题是cube div已经有了来自第一个动画的rotate语句，因此当我添加类（包含transform:rotate）时，它不会为新的旋转设置动画，而是立即跳转到新的旋转度。虽然我使用过渡

我尝试使用添加的类（'.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（函数（）{
document.querySelector（'div'）.classList.add（'rotate-further'）；
}，1500）

div{
宽度：20px；
高度：20px；
背景：蓝色；
动画：向前旋转1s；
}
.进一步轮换{
变换：旋转（150度）；
动画：无；
}
@关键帧旋转{
0% {
-webkit变换：旋转（0）；
变换：旋转（0）；
}
100% {
-webkit变换：旋转（120度）；
变换：旋转（120度）；
}
}

---

您可以按如下方式编辑代码：

window.setTimeout（函数（）{
document.querySelector（'div'）.classList.add（'rotate-further'）；
}，1500）

div{
宽度：20px；
高度：20px；
背景：蓝色；
动画：旋转1s；
变换：旋转（120度）；
过渡：0.5s全部
}
.进一步轮换{
变换：旋转（150度）；
}
@关键帧旋转{
0% {
变换：旋转（0）；
}
}

变换：调用类时，旋转（x）被重置。也没有过渡。可以使用另一个从120度到150度的动画。动画持续时间也可以是0秒。。。。