How to give an animation to border-CodePudding

I have a div that has a gradient border. So I want to give this div an animation and as soon as it is scrolled to this div, I want border-gradient turn around itself. I have no idea how to do it that's why I am asking it direcly.

<div >
          </div>

.border-gradient {
  height: 230px;
  width: 100%;
  border: 5px solid transparent;
  border-image: linear-gradient(190deg,  rgba(205, 0, 98,0) 10%, rgba(205, 0, 98,0.5));
  border-image-slice: 1;
}

CodePudding user response：

I was unable to find a css solution for animating the border, it may be achievable using images.

Anyways, here is a javascript solution

var bored = document.getElementsByClassName("border-gradient")[0]; 
var anim = {'running':0,'deg':0,'time':0};
var animator;
var boredy = bored.getBoundingClientRect().top;//grab the y of the element relative to the top of the web page
checkscroll();//check if element onscreen initially

window.onscroll = checkscroll;//check if element is onscreen when the user scrolls

function checkscroll() {
if(!anim.running && window.scrollY   window.innerHeight >= boredy) {
    anim.running = 1; anim.time = 0;//reset the animation, set running to 1 so the animation won't retrigger while already running
    startanim();
    }
}

function startanim() {
animator = setInterval(function() {
anim.deg  = 1;
anim.time  = 50;

bored.style = `border-image:linear-gradient(${anim.deg}deg,  rgba(205, 0, 98,0) 10%, rgba(205, 0, 98,0.5)); border-image-slice: 1;`;
if(anim.time >= 10000){window.clearInterval(animator); anim.running = 0}
},50);//start a loop that continousouly updates the border
}

Css:

.border-gradient {
  height: 230px;
  width: 100%;
  border: 5px solid transparent;
  border-image: linear-gradient(0deg,  rgba(205, 0, 98,0) 10%, rgba(205, 0, 98,0.5)); 
  border-image-slice: 1;
  margin-top:150vh;
}

Improvements can certainly be made. So play around with it and tweak it to your liking.

CodePudding user response：

you can animate border as:

.border-gradient {
  border: solid 5px #FC5185;
  transition: border-width 0.6s linear;
}
.border-gradient:hover { border-width: 10px; }