Question

我想把我的div填充到100％宽度。在正常状态下，它是0％。这应该发生在x secounds中，因为我想制作一个时间栏，显示这个图像将持续多久直到下一个到来。

一个例子就是这个滑块：

https://drive.google.com/file/d/0BxdN8PyW5nmHMmFFeFY2aW9zdlk/view?usp=sharing

我想在底部做这个小酒吧。

我尝试了一个间隔，每隔1ms增加一次＆＃34;（（FULLWIDTH / 100）/ 8000）％＆＃34;到了div，但是它不会工作（8000分8秒）

我怎么能意识到这一点？

问候，

Janik的

Answer 1

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

https://jsfiddle.net/vgnojc56/

Answer 2

如果您正在寻找使用jQuery的JS回退

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

演示：http://jsfiddle.net/p5nmnbty/1/

Answer 3

您可以将以下css用于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%')

<强> Demo

在x秒内将div填充到100％宽度

3 个答案: