时间戳

首页 > 解决方案 > 我想在我的 SVG 上反转动画的方向

css - 我想在我的 SVG 上反转动画的方向

问题描述

我有这个 codepen 动画：Codepen SVG 测试

.anim {
  width:500px;
  height:281.25px;
  margin: 0;
  padding: 0;
 }
 svg {
  width: 100%;
  height:100%;
  stroke-width:10px;
  stroke: #ff0000;
  stroke-dasharray: 10000;
  stroke-dashoffset: 10000;
  animation: dash 3s ease-in-out forwards infinite;
}

@keyframes dash {
  to {
  stroke-dashoffset: 0;
 }
}

和我的 HTML：

 <div class="anim">
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 1920 1080" enable-background="new 0 0 1920 1080" xml:space="preserve">
   <path fill="none" d="M0,392.306V1080h1920V647.331c0,0-165.5,91.836-384.623,105.011
c-215.715,12.97-302.606-198.286-324.033-252.025c-20.759-52.064-258.025-465.046-591.059-24.002c0,0-150.015,249.024-396.04-24.002
C224.246,452.312,150.792,368.303,0,392.306z"/>
  </svg>
</div>

动画从左上角开始到底部（向前）。

我希望它从同一个左上角开始，但向右移动，波浪所在的位置，然后移动到右下角，然后左下角，然后左上角并结束。

我试过动画方向：反向；但它只是做同样的事情，但倒退了。我只需要使用 css 来执行此操作。我错过了什么？

标签： csscss-animationssvg-animate

解决方案

我找到了解决方案。只需更改值

stroke-dashoffset: 10000;

至

stroke-dashoffset: -10000;

推荐阅读