html - 停止 CSS 动画

Question

我有以下代码在将鼠标悬停在容器 div 上时为图像类设置动画。但是，如果图像处于动画中间并且用户停止悬停，则动画会暂停——这看起来有点奇怪。

有没有办法停止或恢复 CSS 动画到它的静态状态？

.image{
    animation-play-state: paused;
    }

#container:hover .image{
    animation-play-state: running;
    }   

Answer 1

在动画播放之前获取图像的屏幕截图？.image1{ background-image: "yourimage" } #container:hover .image{ 动画播放状态：正在运行；}

并将 image1 设置为静态图像，并将悬停保持为动画。这不是一个失败的证明，但应该在理论上起作用。