我有一个简单的路径,我在其中应用了破折号数组和带有 CSS 的破折号偏移量。然后我正在为这个简单的结构制作动画。动画更改破折号数组和偏移量以减小然后再次增大大小。
奇怪的是,运动似乎在中途反转。有人能帮忙吗?我敢肯定它实际上并没有反转,而是数学导致了意想不到的视觉效果。
.path {
stroke-dasharray: 10;
stroke-dashoffset: 10 30;
animation: dash 5s linear infinite;
}
@keyframes dash {
50%{
stroke-dashoffset: 35%;
stroke-dasharray: 0 87.5%;
}
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve">
<path class="path" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
C46.039,146.545,53.039,128.545,66.039,133.545z"/>
</svg>
对于 props,上面是 this beautiful work 的一个非常精简的版本.
最佳答案
根据 MDN
If a keyframe rule doesn't specify the start or end states of the animation (that is, 0%/from and 100%/to), browsers will use the element's existing styles for the start/end states. This can be used to animate an element from its initial state and back.
你有一个 50% 的关键帧,所以动画会在中场休息时转到那个关键帧,然后在全场比赛结束时回到初始状态。
关于css - SVG 笔划破折号数组 CSS 动画反转类(class)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58210525/