css 控制彩带图片从左到右逐渐显示有画出来的感觉

@keyframes draw-ribbon {
to {
clip-path: inset(0 0 0 0); /* 最终状态完全显示 /
}
}
.line {
position: absolute;
top: 390px;
left: 125px;
width: 1684px;
height: 528px;
background: url(‘图片路径’)
no-repeat center center;
background-size: cover;
clip-path: inset(0 100% 0 0); / 初始状态完全隐藏 */
animation: draw-ribbon 2s linear forwards;
}