求助：鼠标悬停时旋转动画结束后无法保持变换状态

你的问题出在动画执行完毕后没有保留结束状态，默认情况下CSS动画完成后会回到初始样式，哪怕鼠标还停留在元素上。只要给动画加上animation-fill-mode: forwards，就能让元素在动画结束后保持最后一帧的状态，直到鼠标离开。

修改后的完整代码如下：

#centerDiv{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.rotation{
    transform: rotate(0deg);
    /* 可选：添加离开时的平滑过渡，提升交互体验 */
    transition: transform 0.3s ease;
}
.rotation:hover{
    /* 简化动画写法，同时加入forwards属性 */
    animation: rotation 1s forwards;
}
@keyframes rotation{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(-10deg); 
    }
}

<div id="centerDiv">
  <img class="rotation" src="https://dummyimage.com/200x200/aaaaaa/fff" alt="image">
</div>

关键改动说明： #

• animation-fill-mode: forwards：强制动画结束后保持to帧的旋转状态（-10deg），只要鼠标处于悬停状态，这个角度就会一直保留。
• 保留.rotation类的初始transform: rotate(0deg)：当鼠标离开元素时，元素会自动回到这个初始状态，加上transition属性还能实现平滑的复位动画。

内容的提问来源于stack exchange，提问作者tatactic