javascript - 在 x 秒内将一个 div 填充到 100% 宽度

Question

我想将我的 div 填充到 100% 宽度。在正常状态下，它是 0%。这应该在 x 秒后发生，因为我想制作一个小时间条来显示这张图片在下一张图片出现之前会停留多长时间。

一个例子是这个 slider :

https://amazingslider.com/examples/jquery-slideshow-with-ribbon-decoration/

我想在底部做这个小栏。

我尝试了一个间隔，将每 1 毫秒“((FULLWIDTH/100)/8000)%”添加到 div，但它不起作用(8000 持续 8 秒)

我怎么能意识到这一点？

问候，

贾尼克

Answer 1

@keyframes example {
from {width: 0;}
to {width: 100%;}
}
.bar{
height: 5px;
background: #000;
width: 0;
animation-name: example;
animation-duration: 4s;
animation-fill-mode:forwards;
}

<div class="bar"></div>

https://jsfiddle.net/vgnojc56/