如果我用包含动画的svg替换悬停时的背景图像，这将按预期工作-悬停时图像显示，动画开始。但是，如果我第二次悬停，动画不会重新启动，而是以已经完成的状态显示。我在网上搜索了一下，找到了各种各样的解决方案，但都涉及javascript。
(2022年(有没有任何解决方案可以在每次悬停时使用仅css和无javascript重新启动动画？
#d1 {
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20style%3D%22{fill%3Avar%28--col%29}%22%3E%3Cpath%20d%3D%22M16.59%208.59L12%2013.17%207.41%208.59%206%2010l6%206%206-6z%22%2F%3E%3C%2Fsvg%3E);
background-size: 24px 24px;
background-repeat: no-repeat;
width: 24px;
height: 24px;
}
#d1:hover {
background-image: url(data:image/svg+xml,%3Csvg%20id%3D%22a%22%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23dd0000%22%3E%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M16.59%208.59L12%2013.17%207.41%208.59%206%2010l6%206%206-6z%22%2F%3E%20%20%20%20%20%20%20%20%3CanimateTransform%20attributeName%3D%22transform%22%20%20%20%20%20%20%20%20attributeType%3D%22XML%22%20%20%20%20%20%20%20%20type%3D%22rotate%22%20begin%3D%220%22%20%20%20%20%20%20%20%20from%3D%220%200%200%22%20%20%20%20%20%20%20%20to%3D%22-180%200%200%22%20%20%20%20%20%20%20%20dur%3D%22250ms%22%20%20%20%20%20%20%20%20fill%3D%22freeze%22%20%20%20%20%20%20%20%20repeatCount%3D%221%22%20%20restart%3D%22always%22%2F%3E%20%20%20%20%20%20%20%20%3C%2Fsvg%3E);
}<div id="d1"></div>编辑
作为一种变通方法，可以将背景图像属性本身设置为动画，替换为每个都包含一帧的SVG切片版本。使用sass可以很容易地为简单的动画做到这一点。这个解决方案用所有的svg来渲染css，对于更复杂的动画来说会变得更复杂，所以只替换图像的解决方案会更好
这里是一个选择框动画聚焦的例子
@keyframes rot {
0% {background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22%2306d%22 transform=%22rotate(0)%22%3E%3Cpath d=%22M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z%22/%3E%3C/svg%3E");}
10% {background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22%2306d%22 transform=%22rotate(-18)%22%3E%3Cpath d=%22M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z%22/%3E%3C/svg%3E");}
20% {background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22%2306d%22 transform=%22rotate(-36)%22%3E%3Cpath d=%22M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z%22/%3E%3C/svg%3E");}
30% {background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22%2306d%22 transform=%22rotate(-54)%22%3E%3Cpath d=%22M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z%22/%3E%3C/svg%3E");}
40% {background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22%2306d%22 transform=%22rotate(-72)%22%3E%3Cpath d=%22M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z%22/%3E%3C/svg%3E");}
50% {background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22%2306d%22 transform=%22rotate(-90)%22%3E%3Cpath d=%22M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z%22/%3E%3C/svg%3E");}
60% {background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22%2306d%22 transform=%22rotate(-108)%22%3E%3Cpath d=%22M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z%22/%3E%3C/svg%3E");}
70% {background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22%2306d%22 transform=%22rotate(-126)%22%3E%3Cpath d=%22M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z%22/%3E%3C/svg%3E");}
80% {background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22%2306d%22 transform=%22rotate(-144)%22%3E%3Cpath d=%22M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z%22/%3E%3C/svg%3E");}
90% {background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22%2306d%22 transform=%22rotate(-162)%22%3E%3Cpath d=%22M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z%22/%3E%3C/svg%3E");}
100% {background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22%2306d%22 transform=%22rotate(-180)%22%3E%3Cpath d=%22M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z%22/%3E%3C/svg%3E");}
}
select {
appearance: none;
width: 100px;
padding: 10px;
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22%23000%22%3E%3Cpath d=%22M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z%22/%3E%3C/svg%3E");
background-size: 24px 24px;
background-repeat: no-repeat;
background-position: right center;
outline: none;
}
select:focus {
animation: rot linear 200ms;
animation-fill-mode: forwards;
}<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>没有。问题出在浏览器缓存上。它用"；动画状态"；。当你再次点击"；运行代码片段"；它甚至在第一次悬停时也没有动画。为什么不试试CSS动画而不是SVG动画呢？它们正是为此而生。它甚至可以轻松地进行反向动画和半动画(尝试将鼠标快速移动到图标上，你会注意到它是如何运行半动画、停止并返回其位置的(：
#d1 {
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20style%3D%22{fill%3Avar%28--col%29}%22%3E%3Cpath%20d%3D%22M16.59%208.59L12%2013.17%207.41%208.59%206%2010l6%206%206-6z%22%2F%3E%3C%2Fsvg%3E);
background-size: 24px 24px;
background-repeat: no-repeat;
width: 24px;
height: 24px;
transition: transform 300ms;
}
#d1:hover {
transform: rotate(-180deg);
}<div id="d1"></div>如果你想改变颜色，只需添加滤色器或其他任何东西。