反转左侧的svg动画？答案

【问题标题】：Invert the left svg animation?反转左侧的svg动画？
【发布时间】：2022-01-23 18:00:36
【问题描述】：

这是我的代码https://codepen.io/victoreugen2002/pen/PoJJPzP

我正在尝试为左右 svg 设置动画，以实现此目的：

两者同时从顶部开始并继续绘制。
直到他们都在中间的底部相遇。

为了实现这一点，我正在考虑反转左 svg 的动画，但它不起作用：

.left {
    width: 50%;
    stroke-dasharray: 1855.968505859375;
    animation: dash 2s ease-in;

    @keyframes dash {
        from {
            stroke-dashoffset: 1855.968505859375;
        }
        to {
            stroke-dashoffset: 3710;
        }
    }

    svg {
        left: 0;
    }
}

【问题讨论】：

标签： css svg

【解决方案1】：

你必须从 -1855.968505859375 到 0。

.left {
  width: 50%;
  stroke-dasharray: 1855.968505859375;
  animation: dash-left 2s ease-in;
}

.left svg {
  left: 0;
}

.right {
  width: 50%;
  stroke-dasharray: 1855.968505859375;
  animation: dash-right 2s ease-in;
}

.right svg {
  right: 0;
}

svg {
  position: absolute;
  top: 20px;
  width: 50%;
  stroke-width: 5px;
}


@keyframes dash-left {
  from { stroke-dashoffset: -1855.968505859375 }
  to { stroke-dashoffset: 0 }
}

@keyframes dash-right {
  from { stroke-dashoffset: 1855.968505859375 }
  to { stroke-dashoffset: 0 }
}

<div class="left">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 733 425">
    <path d="M733,424.5H39A38.5,38.5,0,0,1,.5,386V39A38.5,38.5,0,0,1,39,.5H733" style="fill: none;stroke: #78be21"/>
  </svg>
</div>

<div class="right">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 733 425">
    <path d="M0,.5H694A38.5,38.5,0,0,1,732.5,39V386A38.5,38.5,0,0,1,694,424.5H0" style="fill: none;stroke: #78be21"/>
  </svg>
</div>

【讨论】：