CSS：动画偏移图像边框

问题描述

所以，我正在尝试使用CSS实现这种动画边框

sample of the border

示例动画css是：

@keyframes bg {
    0% {
        background-size:    0 3px,3px 0,0 3px,3px 0;
    }
    25% {
        background-size:    100% 3px,3px 0;
    }
    50% {
        background-size:    100% 3px,3px 100%,3px 0;
    }
    75% {
        background-size:    100% 3px,100% 3px,3px 0;
    }
    100% {
        background-size:    100% 3px,3px 100%;
    }
}

div {
    width: 25%;
    margin: 2rem auto;
    padding: 2em;
    
    background-repeat: no-repeat;
    background-image:   linear-gradient(to right,#f5ca00 100%,#f5ca00 100%),linear-gradient(to bottom,linear-gradient(to right,#f5ca00 100%);
    background-size:    100% 3px,3px 100%;
    background-position:    0 0,100% 0,100% 100%,0 100%;
    animation: bg 1.25s cubic-bezier(0.19,1,0.22,1) 1;
    animation-play-state: paused;
}

div:hover {
    animation-play-state: running;
}

<div>         
    <img src="https://moro.fund/wp-content/uploads/2020/08/scale-photo.png" alt="">
        </div>

我只希望最后一个动画行是图像的一半，就像开始处的示例一样：）

请注意，它将在wordpress中使用。 任何帮助或指导都将受到赞赏。

解决方法

尝试使用：after伪类添加到div样式，并在悬停或initail动画上对其进行动画处理。

@keyframes bg {
    0% {
        background-size:    0 3px,3px 0,0 3px,3px 0;
    }
    25% {
        background-size:    100% 3px,3px 0;
    }
    50% {
        background-size:    100% 3px,3px 100%,3px 0;
    }
    75% {
        background-size:    100% 3px,100% 3px,3px 0;
    }
    100% {
        background-size:    100% 3px,3px 100%;
    }
}

div {
    width: 25%;
    margin: 2rem auto;
    padding: 2em;
    
    background-repeat: no-repeat;
    background-image:   linear-gradient(to right,#f5ca00 100%,#f5ca00 100%),linear-gradient(to bottom,linear-gradient(to right,#f5ca00 100%);
    background-size:    100% 3px,3px 100%;
    background-position:    0 0,100% 0,100% 100%,0 100%;
    animation: bg 1.25s cubic-bezier(0.19,1,0.22,1) 1;
    animation-play-state: paused;
    position: relative;
}

div:hover {
    animation-play-state: running;
}

div:after{
  content: '';
  width: 2px;
  height: 0;
  background: #f5ca00;
  position: absolute;
  right: 0;
  top: 0;
  transition: height .3s ease;
}
div:hover:after {
    height: 100px;
}

<div>         
    <img src="https://moro.fund/wp-content/uploads/2020/08/scale-photo.png" alt="">
        </div>