Question

我正在通过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);
    }
}

这是第一次使用，但是我想将过渡返回设置为默认的未旋转位置。我已经尝试添加一个额外的类，但这会覆盖原始动画;删除该类会重置它而不需要动画。有没有一种简单的方法来实现这一目标？

Answer 1

function back(){
document.getElementById('ele').classList = "rotate-0-left";
}

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

<h1 id="ele" class="rotate-45-left"> Rotate </h1>

<input type="button" value="back to original" onClick="back()"/>

使用CSS反转动画

1 个答案: