Как применить анимированный border

.container { 
width:50%; 
height:50%; 
} 
#rec1 { 
fill:transparent; 
stroke-width:3; 
stroke:url(#linearGradient); 
}

<div class="container"> 
<svg version="1.1" viewBox="0 0 237 113" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > 
 <defs> 
  <linearGradient id="linearGradient" x1="-36" x2="200" y1="148" y2="148" gradientUnits="userSpaceOnUse"> 
   <stop style="stop-color:violet" offset="0"> 
    <animate  
	 attributeName="stop-color" 
	 dur="1.5s" 
	 values="violet;blue;violet" 
	 repeatCount="indefinite"  /> 
   </stop> 
   <stop style="stop-color:blue" offset="0.8"> 
     <animate attributeName="stop-color" 
	 dur="1.5s"  
	 values="blue;orange;blue" 
	 repeatCount="indefinite"  /> 
   </stop> 
    <stop style="stop-color:orange" offset="1"> 
     <animate  
	  attributeName="stop-color"  
	  dur="1.5s" 
	  values="orange;violet;orange"  
	  repeatCount="indefinite" /> 
    </stop> 
   
  </linearGradient> 
 </defs> 
 <g id="rec"  
   transform="translate(36 -91)" 
 > 
  <rect id="rec1" 
   x="-35" y="93" 
   width="234" height="110" ry="18" 
 </g> 
</svg> 
</div>

.container { 
  width: 50%; 
  height: 50%; 
} 
#rec1 { 
fill: transparent; 
stroke-width:2; 
stroke:url(#linearGradient); 
} 
#txt1 { 
font-size:48px; 
fill: url(#linearGradient); 
}

<div class="container"> 
  <svg version="1.1" viewBox="0 0 237 113" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 <defs> 
  <linearGradient id="linearGradient" x1="-36" x2="200" y1="148" y2="148" gradientUnits="userSpaceOnUse"> 
   <stop style="stop-color:violet" offset="0"> 
    <animate  
     attributeName="stop-color"  
	 dur="0.8s"  
	 values="violet;blue;violet"  
	 begin="rec.click"  
	 repeatCount="2" 
	/> 
   </stop> 
    <stop style="stop-color:blue" offset="0.8"> 
     <animate  
	 attributeName="stop-color" 
	 dur="1.0s" 
	 values="blue;orange;blue"  
	 begin="rec.click"  
	 repeatCount="2" 
	/> 
   </stop> 
    <stop style="stop-color:orange" offset="1"> 
    <animate  
	 attributeName="stop-color"  
	 dur="1.5s"  
	 values="orange;violet;orange" 
	 begin="rec.click"  
	 repeatCount="2" 
    /> 
   </stop> 
   
  </linearGradient> 
 </defs> 
 <g id="rec" transform="translate(36 -91)"> 
  <rect id="rec1" x="-35" y="93" width="234" height="110" ry="18" /> 
   <text id="txt1" x="0" y="158"  >Click me</text> 
 </g> 
</svg> 
</div>

@import url('https://fonts.googleapis.com/css?family=Raleway:200'); 
html, 
body { 
  height: 100%; 
} 
 
body { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  height: 100%; 
  background: #1D1F20; 
} 
 
#box { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  width: 400px; 
  height: 200px; 
  color: white; 
  font-family: 'Raleway'; 
  font-size: 2.5rem; 
} 
 
.post-38435.post img { 
  width: 100%; 
  height: 100%; 
  border-radius: var(--borderWidth); 
} 
 
.post-38435.post { 
  --borderWidth: 3px; 
  background: #1D1F20; 
  position: relative; 
  border-radius: var(--borderWidth); 
} 
 
.post-38435.post:after { 
  content: ''; 
  position: absolute; 
  top: calc(-1 * var(--borderWidth)); 
  left: calc(-1 * var(--borderWidth)); 
  height: calc(100% + var(--borderWidth) * 2); 
  width: calc(100% + var(--borderWidth) * 2); 
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82); 
  border-radius: calc(2 * var(--borderWidth)); 
  z-index: -1; 
  animation: animatedgradient 3s ease alternate infinite; 
  background-size: 300% 300%; 
} 
 
@keyframes animatedgradient { 
  0% { 
    background-position: 0% 50%; 
  } 
  50% { 
    background-position: 100% 50%; 
  } 
  100% { 
    background-position: 0% 50%; 
  } 
}

<div class="post post-38435" id="box"> 
  <img src="http://bass-sklep.pl/uploads/picture/pl_PL/840b0670c3e1b8eefeaea0166371dc37.jpg" /> 
</div>