为什么我的@keyframes动画不能使用SVG的"stroke dashoffset"属性

Question

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

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

@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

如用户4642212 所评论

动画肯定是活动的(正如您在开发工具中看到的(，但是它没有效果。你希望它做什么？行程dashoffset修改笔划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>