Question

我有一个我动画的svg，

动画效果很好，我将它设置为动画填充模式：转发到它完成动画后保持不变。

目前，在svg html中，我有

stroke="none"

然后在@keyframes css中，我拥有它：

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

一旦完成动画制作，我希望笔画能够改变颜色：悬停，就像它一样。

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

我怎样才能让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;
}

SVG动画在悬停时重置

1 个答案: