两个状态之间的平滑动画

Question

好的伙计们，我真的需要一些帮助，这让我大吃一惊......

请查看以下示例：

https://jsfiddle.net/t0Lahyjy/

HTML：

<div id="exmpl"></div>
<button id="btn">Try it</button>

CSS：

#exmpl {
  margin: 100px auto 0 auto;
  height: 100px;
  width: 10px;
  background: #000;
  -webkit-animation: anim 3s infinite linear;
  animation: anim 3s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

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

#btn {
  margin: 100px auto 0 auto;
  display:block;
}
.animationIsOff {

}

JS：

document.getElementById("btn").addEventListener("click", function(){
    document.getElementById("btn").className += " animationIsOff";
});

现在看，我想要的是......点击transform: rotate(90deg);时，将默认旋转状态的平滑动画设置为#btn。我想添加一个新课程，比如说animationIsOff，但这两个州之间没有平滑。如果没有办法用CSS实现这种平滑性（只用JS添加一个类），也许有一种方法可以在JS的帮助下完成它？

我希望我对你很清楚，否则请问......我会尽可能地描述它。