Jquery 使用CSS反转动画

我通过jQuery添加类来应用mixin来旋转某些内容：

.rotate-45-left() {
    -webkit-animation: rotate45left 2.55s ease;
    -moz-animation: rotate45left 2.55s ease;
    animation: rotate45left 2.55s ease;
    animation-fill-mode: forwards;
}
@keyframes rotate45left {
    100% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
}

这是第一次工作，但我想然后动画过渡回其默认的，未旋转的位置。我尝试添加一个附加类，但这会覆盖原始动画；移除该类将在不设置动画的情况下重置它。有没有一个简单的方法来实现这一点？

函数返回{ document.getElementById'ele'.classList=rotate-0-left； } .向左旋转45度{ -webkit动画：旋转45左1.55秒； -moz动画：旋转45左1.55秒； 动画：旋转45左1.55秒； 动画填充模式：正向； } .向左旋转-0{ -webkit动画：旋转左1.55秒； -moz动画：旋转左1.55秒； 动画：向左旋转1.55秒； 动画填充模式：正向； } @关键帧向左旋转45{ 100%{ -webkit变换：旋转-45度； 变换：旋转-45度； } } @关键帧向左旋转{ 0%{ -webkit变换：旋转-45度； 变换：旋转-45度； } } 100%{ -webkit变换：旋转0度； 变换：旋转0度； } } 旋转

---

使用转场而不是动画？@启用了七个阶段的最大转场，但是旋转不会以-45度的50%和100%恢复正常。50%{-webkit transform:rotate-45deg；transform:rotate-45deg；}100%{-webkit transform:rotate0deg；transform:rotate0deg；}@yogendarji我不知道如何用一个类实现50%的目标？如果有效，我将选择“转换”作为答案。如何在命令时触发到50%，然后在命令时触发到100%。@SB2055您的意思是在应用rotate-45-left类后，元素将旋转45度，然后使用相同的动画重置到其原始位置？对吗？对。旋转至45，等待用户执行操作，然后旋转回原始位置0。