SVG中风破折号数组CSS动画反转课程？答案

【问题标题】：SVG stroke dash array CSS animation reverses course?SVG中风破折号数组CSS动画反转课程？
【发布时间】：2019-10-02 23:24:24
【问题描述】：

我有一个简单的路径，我正在应用一个破折号数组和一个带有 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>

对于道具，上面是this beautiful work的一个非常简化的版本。

【问题讨论】：

标签： css svg jquery-animate

【解决方案1】：

每MDN

如果关键帧规则未指定动画的开始或结束状态（即 0%/from 和 100%/to），浏览器将使用元素的现有样式作为开始/结束状态。这可用于为元素从其初始状态设置动画并返回。

你有一个 50% 的关键帧，所以动画在半场时会转到那个关键帧，然后在全场时回到初始状态。

【讨论】：

[手掌和脸在雷鸣般的掌声中相遇]。这真的很尴尬，我应该知道这一点。谢谢！