为什么我的 @keyframes 动画不能与 SVG `stroke-dashoffset` 属性一起使用？

Question

当我尝试将 CSS 动画应用到我的 <svg> 元素时，我的 CSS 动画不起作用。

我尝试使用前缀，但仍然没有解决问题。

@keyframes mymove {
  0% {
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dashoffset: 56.52;
  }
}

@-webkit-keyframes mymove {
  0% {
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dashoffset: 56.52;
  }
}

.circle {
  position: absolute;
  top: 0;
  left: 0;
  animation-duration: 1.4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-name: mymove;
  -webkit-animation-name: mymove;
}

<nav class="footage-nav">
  <a class="link" href="my_work/index.html"><svg height="20" width="20"><circle class="circle" cx="50%" cy="50%" r="9" stroke="#231f20" stroke-width="1" fill-opacity="0" /></svg>Work<div class="underLine"></div></a>
  <a href=""><svg height="20" width="20"><circle class="circle" cx="50%" cy="50%" r="9" stroke="#231f20" stroke-width="1" fill-opacity="0" /></svg>About<div class="underLine"></div></a>
</nav>

Answer 1

由 user4642212 评论

动画肯定是活跃的（正如您在开发工具中看到的那样），但是 它没有效果。你期待它做什么？冲程-冲程偏移 修改 stroke-dasharray 的开始位置。你从来没有设置过。

换句话说，要使动画生效，您需要将stroke-dasharray 添加到动画对象中。：stroke-dasharray:56.52;

@keyframes mymove {
  0% {
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dashoffset: 56.52;
  }
}

@-webkit-keyframes mymove {
  0% {
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dashoffset: 56.52;
  }
}

.circle {
  stroke-dasharray:56.52;
  position: absolute;
  top: 0;
  left: 0;
  animation-duration: 1.4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-name: mymove;
  -webkit-animation-name: mymove;
}

<nav class="footage-nav">
  <a class="link" href="my_work/index.html"><svg height="20" width="20"><circle class="circle" cx="50%" cy="50%" r="9" stroke="#231f20" stroke-width="1" fill-opacity="0" /></svg>Work<div class="underLine"></div></a>
  <a href=""><svg height="20" width="20"><circle class="circle" cx="50%" cy="50%" r="9" stroke="#231f20" stroke-width="1" fill-opacity="0" /></svg>About<div class="underLine"></div></a>
</nav>

鼠标悬停在链接上时的动画选项

@keyframes mymove {
  0% {
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dashoffset: 56.52;
  }
}

@-webkit-keyframes mymove {
  0% {
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dashoffset: 56.52;
  }
}

.circle {
  stroke-dasharray:56.52;
  position: absolute;
  top: 0;
  left: 0;
  
}

.link:hover {
animation-duration: 1.4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-name: mymove;
  -webkit-animation-name: mymove;
}

<nav class="footage-nav">
  <a class="link" href="my_work/index.html"><svg height="20" width="20"><circle class="circle" cx="50%" cy="50%" r="9" stroke="#231f20" stroke-width="1" fill-opacity="0" /></svg>Work<div class="underLine"></div></a>
  <a class="link" href=""><svg height="20" width="20"><circle class="circle" cx="50%" cy="50%" r="9" stroke="#231f20" stroke-width="1" fill-opacity="0" /></svg>About<div class="underLine"></div></a>
</nav>