title: How to animate a border with linear gradient but with transparent Background
body: <p>I would like to animate the border of an element with a linear gradient; the element has a <strong>transparent background</strong>. To illustrate this, please see the following images:</p>
  
  <p><a href="https://i.stack.imgur.com/CSaqJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CSaqJ.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/U062I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/U062I.png" alt="enter image description here"></a></p>
  
  <p>The following is a solution that comes very close to my needs, but I can't remove the background.</p>
  
  <pre><code>.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;
    }
  }
  </code></pre>
  
  <p>Next solution that comes also very close but has the same problem with the background:</p>
  
  <p><a href="https://codepen.io/pimmey/pen/NABQWX" rel="nofollow noreferrer">https://codepen.io/pimmey/pen/NABQWX</a></p>
  
  <p>Is it possible to animate the border-image property with Javascript?</p>