css - 在悬停时动画并在 CSS 中完成时卡住动画

Question

我有一个名为 logo 的 div 的悬停动画。当鼠标悬停时，我希望 Logo 倾斜。但是，我不希望 Logo 在动画结束后恢复到原始状态，直到有人将鼠标移出元素(鼠标移出)为止。

#logo:hover{
    -webkit-animation-name:logorotate;
    animation-name:logorotate;
    -webkit-animation-duration:0.5s;
}
@-webkit-keyframes logorotate{
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(10deg);
    }
}

Answer 1

如果您希望悬停有一个状态，并且当有人悬停时变化是平滑的，那就是过渡而不是动画

#logo{
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
}

#logo:hover{
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
}