Javascript 在x秒范围内填充一个100%宽度的div

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

例如，此滑块：

我想在底部做这个小酒吧

我尝试了一个间隔，将每1ms“（（FULLWIDTH/100）/8000）%”添加到div中，但它不起作用（8000表示8秒）

我怎么会意识到这一点

您好

---

Janik

您可以使用以下css to div元素：

div {
   background:grey;
   width:0%;
   -webkit-transition: width 8s ease-in-out;
   -moz-transition: width 8s ease-in-out;
   -o-transition: width 8s ease-in-out;
   transition: width 8s ease-in-out;
}

然后添加宽度

100%

：

$('div').css('width','100%')

@关键帧示例{
从{宽度：0；}
到{宽度：100%；}
}
.酒吧{
高度：5px；
背景：#000；
宽度：0；
动画名称：示例；
动画持续时间：4s；
动画填充模式：正向；
}

---

以防使用jQuery查找JS回退

$(document).ready(function()
              {
                  $('.bar').animate({width: '100%'}, 5000);
              });

---

演示：

添加您已经尝试过的代码。谢谢，这也很好！但是什么时候我应该通过js将它设置为100%？你想让它加载吗？加载，图片更改等等。但是afelixj没有js就做到了。它工作得很好，我可以通过addClass运行它：）但是谢谢你的回复