在图像上完成箔片动画时遇到麻烦

Question

作为我之前开始的方法的延续，我想"如果我在内部图像上添加一个闪光的反射会怎么样?"所以我做了:

wrapper {
display: flex;
justify-content: center;
margin-top: 2.5%;
}
.border {
/*background-image: linear-gradient(-225deg, #fff 0%, rgba(255, 255, 255, 0) 40%, rgba(0, 255, 255, 0) 60%, cyan 100%), linear-gradient(45deg, #3023AE 0%, #f09 100%);*/
background: #000;
clip-path: url(#svgClip);
height: 354.5px;
width: 354.5px;
}
.outer {
background: tomato;
clip-path: url(#svgClip);
height: 351px;
left: 2px;
position:relative;
top: 2px;
width: 351px;
}
.inner {
height: 81.5%;
left: 2.1rem;
position:relative;
top: 2.1rem;
width: 82.5%;
z-index: 1;
}
img {
border-radius: 1rem;
border: 2px solid #000;
height: 97.4%;
object-fit: cover;
object-position: 0;
width: 97.4%;
}
.foil{
display: inline-block;
height: 100%;
overflow: hidden;
position: relative;
width: 100%;
}
.foil:before{
animation: shine 5s infinite;
background: linear-gradient(transparent 0%,
rgba(255, 255, 255, 0.1) 45%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0.1) 55%,
transparent 100%);
/*transition: all 2s;*/
content: "";
height: 200%;
left:-120%;
position: absolute;
top:-120%;
transform: rotate(-45deg);
width: 200%;
z-index: 10;
}
@keyframes shine{
80%, 100% {top:-120%;left:-120%;}
0%, 20%, 40% {left:100%;top:100%;}
}

<wrapper>
<div class="border">
<div class="outer">
<div class="inner">
<div class="foil">
<img src="https://media-exp1.licdn.com/dms/image/C4D1BAQFsdjpzrtQWUA/company-background_10000/0/1519796755846?e=2159024400&v=beta&t=tL2HSXGgliQAAqXK0ZvfDvXvdRD2j3Gpk_juoBRmYlM" />
</div>
</div>
</div>
</div>
</wrapper>
<svg width="0" height="0">
<clipPath id="svgClip" clipPathUnits="objectBoundingBox">
<path d="M.067.067C.1676 0 .8379 0 .9385.067C1.0055.1676 1.0055.8379.9385.9385C.8379 1.0055.1676 1.0055.067.9385C0 .8379 0 .1676.067.067"></path>
</clipPath>
</svg>

但是看起来我没有得到正确的动画步骤，因为反射开始，结束，然后在它消失之前有一个明显的暂停，然后返回到图像的全彩

Answer 1

将其移至100%:

wrapper {
display: flex;
justify-content: center;
margin-top: 2.5%;
}
.outer {
background-image: linear-gradient(-225deg, #fff 0%, rgba(255, 255, 255, 0) 40%, rgba(0, 255, 255, 0) 60%, cyan 100%), linear-gradient(45deg, #3023AE 0%, #f09 100%);
clip-path: url(#svgClip);
display: block;
height: 350px;
object-fit: cover;
position:relative;
width: 350px;
}
.inner {
height: 80%;
left: 10%;
position:relative;
top: 10%;
width: 80%;
z-index: 1;
}
img {
height: 100%;
border-radius: 1rem;
left: 0;
position: relative;
top: 0;
width: 100%;
}
.foil{
display: inline-block;
height: 100%;
overflow: hidden;
position: relative;
width: 100%;
}
.foil:before{
animation: shine 5s infinite;
background: linear-gradient(transparent 0%,
rgba(255, 255, 255, 0.1) 45%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0.1) 55%,
transparent 100%);
/*transition: all 2s;*/
content: "";
height: 200%;
left:-120%;
position: absolute;
top:-120%;
transform: rotate(-45deg);
width: 200%;
z-index: 10;
}
@keyframes shine{
100% {top:-150%;left:-150%;}
80% {top:-120%;left:-120%;}
0%, 20%, 40% {left:100%;top:100%;}
}

<wrapper>
<div class="outer">
<div class="inner">
<div class="foil">
<img src="https://media-exp1.licdn.com/dms/image/C4D1BAQFsdjpzrtQWUA/company-background_10000/0/1519796755846?e=2159024400&v=beta&t=tL2HSXGgliQAAqXK0ZvfDvXvdRD2j3Gpk_juoBRmYlM" />
</div>
</div>
</div>
</wrapper>
<svg width="0" height="0">
<clipPath id="svgClip" clipPathUnits="objectBoundingBox">
<path d="M.067.067C.1676 0 .8379 0 .9385.067C1.0055.1676 1.0055.8379.9385.9385C.8379 1.0055.1676 1.0055.067.9385C0 .8379 0 .1676.067.067"></path>
</clipPath>
</svg>