CSS Gradient Border Animation Degree Problem-CodePudding

I want to create a gradient border animation starting from the top left to the bottom right. The animation will be used for images within this div. I tried every degree of angle, but didn't get this to work in the direction I want, it always starts at the right top or at the bottom right.

Also tried it with negative degree values.

.block {
    position: relative;
    margin: 30px auto 0;
    width: 250px;
    height: 250px;
    background: #272727;
}

.block:before, .block:after {
    content: '';
  position: absolute;
    left: -1px;
    top: -1px;
    background: linear-gradient(45deg, rgba(0,0,0,0)35%, rgba(0,204,255,1)50%, rgba(0,0,0,0)65%);
    background-size: 400%;
    width: calc(100%   2px);
    height: calc(100%   2px);
    z-index: -1;
    animation: shine 8s linear infinite;
}

@keyframes shine {
    to {
      background-position: 400% center;
    }
  }

.block:after {
    filter: blur(8px);
}

<div ></div>

CodePudding user response：

Update your code like below:

.block {
  position: relative;
  margin: 30px auto 0;
  width: 250px;
  height: 250px;
  background: #272727;
}

.block:after {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(-45deg, rgba(0, 0, 0, 0)35%, rgba(0, 204, 255, 1)50%, rgba(0, 0, 0, 0)65%);
  background-size: 400% 400%;
  z-index: -1;
  animation: shine 3s linear infinite;
  filter: blur(8px);
}

@keyframes shine {
  from {
    background-position: 100% 100%
  }
  to {
    background-position: 0 0
  }
}

<div ></div>