html - SVG 动画在悬停时重置

Question

我有一个 svg 动画，

动画运行流畅，我将它设置为 animation-fill-mode: 转发到它在完成动画后保持原样。

目前，在 svg html 中，我有

stroke="none"

然后在@keyframes css 中，我有它:

from{ stroke: none; }
to { stroke: #fff; }

完成动画后，我希望笔触在 :hover 上改变颜色，它确实做到了。

但是一旦我将光标移开，动画就会重新开始。

我如何让 SVG 在悬停完成后立即返回到它的#FFF 笔画而不触发动画？

Here is my Codepen

Answer 1

您已经使用了 animation-timing-function: ease，但是在值 none 和 #fff 之间没有平滑的过渡 - 一个是关键字，另一个是颜色值。要从“不可见”到“可见”，请改用 opacity 属性并定义 fill 独立于动画。

如果这样做，您可以在动画后将 opacity 保留为 1，并且仅将 fill 值交换为悬停。不要在悬停期间关闭动画。

@keyframes shield {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
#outer-left, #outer-btm-left, #outer-btm-right, #outer-right, #outer-top {
  animation-name: shield;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  stroke:#fff;
  opacity:0;
  }

#outer-left:hover {
  stroke: red;
}

#outer-btm-left:hover {
  stroke: red;
}