CSS中不断增长的条形动画

Question

是否可以在CSS中创建“增长栏”动画？

示例： http ： //i.stack.imgur.com/lWIkw.gif

如果没有，这是正确的方法吗？

 window.addEventListener("Click",test()); i=0; function test(){ setTimeout(function(){ i+=5; document.getElementById('growing-bar').style.height = i + 'px'; if(i<99){ test(); } },50); } 

 #growing-bar{ background:red; width:50px; margin:50px; } 

 <div id="growing-bar"></div> 

工作小提琴

提前致谢！

Answer 1

这是一个纯CSS解决方案：

 div { height: 10px; width: 50px; background: black; animation-name: grow; animation-duration: 3s; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes grow { 100% { height: 100px; }; } 

 <div></div> 

Answer 2

您可以将top transform-origin设置为top ， translate transform-origin set设置为0%, 0% ， transform rotate设置为180deg ，以便垂直应用height动画； 在animation声明中包括forwards

 #growing-bar{ background:red; width:50px; margin:50px; position:relative; top:100px; transform-origin:top; transform: translate(0%, 0%) rotate(180deg); animation: grow 20s forwards; } @keyframes grow { from { height:0px; } to { height:150px; } } 

 <div id="growing-bar"></div>