Javascript 如何为具有线性渐变但背景透明的边界设置动画

我想用线性渐变设置元素边界的动画；该元素具有透明背景。为了说明这一点，请参见以下图片：

下面是一个非常接近我需要的解决方案，但我无法删除背景

.btn__get-tickets {
  padding: 10px;
  background: white;
  background-clip: content-box;
  position: relative;
}
.btn__get-tickets:after, .btn__get-tickets:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content:'';
}
.btn__get-tickets:after {
  background: linear-gradient(140deg, #5bc7d3, #88ca43, #fdd207);
  z-index: -1;
  animation: test 5s ease infinite;
}
.btn__get-tickets:before {
  background: linear-gradient(120deg, #88ca43, #fdd207,#5bc7d3);
  z-index: -2;
}

@keyframes test {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

下一个解决方案也很接近，但与背景有相同的问题：

---

是否可以使用Javascript设置边框图像属性的动画？

下面是一个从背景动画渐变到假边框的示例：

按钮{
垂直对齐：顶部；
边界：无；
填充：15px；
背景：线性梯度(
在右侧，/*使用每种颜色，并在末尾重复第一种颜色*/
#79c975，
#5dc7cc，
#fad108，
#b9ce2b，
#79c975
)
160%
0
重复-x，
线性梯度（至顶部，#79c975，#5dc7cc，#fad108，#b9ce2b，#79c975）
100%
20%
重复-y，
线性梯度（向左，#79c975，#5dc7cc，#fad108，#b9ce2b，#79c975）
10%
100%
重复-x，
线性梯度（至底部，#79c975，#5dc7cc，#fad108，#b9ce2b，#79c975）
0%
10%
重复-y；
背景大小：300%10px，10px 300%；/*增加大小，以立即显示2种渐变色的位*/
动画：bd 5s无限线性；
}
@关键帧bd{
50% {
背景位置：460%0、100%320%、310%100%、0%310%；/*平均重置背景位置，将其调整至所需效果*/
}
}
身体{
背景：灰色；
}

按钮
另一个按钮

这里是一个从背景动画渐变到假边框的示例：

按钮{
垂直对齐：顶部；
边界：无；
填充：15px；
背景：线性梯度(
在右侧，/*使用每种颜色，并在末尾重复第一种颜色*/
#79c975，
#5dc7cc，
#fad108，
#b9ce2b，
#79c975
)
160%
0
重复-x，
线性梯度（至顶部，#79c975，#5dc7cc，#fad108，#b9ce2b，#79c975）
100%
20%
重复-y，
线性梯度（向左，#79c975，#5dc7cc，#fad108，#b9ce2b，#79c975）
10%
100%
重复-x，
线性梯度（至底部，#79c975，#5dc7cc，#fad108，#b9ce2b，#79c975）
0%
10%
重复-y；
背景大小：300%10px，10px 300%；/*增加大小，以立即显示2种渐变色的位*/
动画：bd 5s无限线性；
}
@关键帧bd{
50% {
背景位置：460%0、100%320%、310%100%、0%310%；/*平均重置背景位置，将其调整至所需效果*/
}
}
身体{
背景：灰色；
}

按钮
还有另一个按钮

最后，使用动画SVG执行此操作的提示对我起到了作用

我的解决方案如下所示：

<a href="#" class="btn btn__get-tickets">Button</a>

SVG

`
`

最后，使用动画SVG执行此操作的提示对我起到了作用

我的解决方案如下所示：

<a href="#" class="btn btn__get-tickets">Button</a>

SVG

`
`

到目前为止，您尝试过什么吗？StackOverflow不是一个免费的代码编写服务，它希望您能够这样做。请更新您的问题，以展示您已经尝试过的内容，并展示您在某个领域面临的具体问题。有关更多信息，请参阅，并查看网站的：）您可能想看看这个CodePen示例。请注意，许多实现都使用某种处理器。提示：背景位置上的动画，最终为背景size@KanstantsinArlouski：非常好的解决方案，但它使用剪辑路径。我需要更大的浏览器支持。谢谢你的链接@GCyrillus：同样的问题，背景坚实。到目前为止你试过什么吗？StackOverflow不是一个免费的代码编写服务，它希望您能够这样做。请更新您的问题，以展示您已经尝试过的内容，并展示您在某个领域面临的具体问题。有关更多信息，请参阅，并查看网站的：）您可能想看看这个CodePen示例。请注意，许多实现都使用某种处理器。提示：背景位置上的动画，最终为背景size@KanstantsinArlouski：非常好的解决方案，但它使用剪辑路径。我需要更大的浏览器支持。谢谢你的链接@GCyrillus：同样的问题，背景坚实。嗨，谢谢你。您使用SVG做这件事是非常正确的。就这样。所以我找到了一个非常简单的解决方案。嗨，谢谢你。您使用SVG做这件事是非常正确的。就这样。所以我找到了一个非常简单的解决方案。

`<svg width="160" height="70">
  <defs>
    <linearGradient id="linear" x1="50%" y1="0%" x2="50%" y2="100%">
      <stop offset="0%" stop-color="#7A5FFF">
        <animate attributeName="stop-color" values="#7A5FFF; #01FF89; #7A5FFF" dur="4s" repeatCount="indefinite"></animate>
      </stop>
      <stop offset="100%" stop-color="#01FF89">
        <animate attributeName="stop-color" values="#01FF89; #7A5FFF; #01FF89" dur="4s" repeatCount="indefinite"></animate>
      </stop>
    </linearGradient>
  </defs>
  <rect x="5" y="5" width="150" height="60" fill="url(#linear)"></rect>
</svg>`