javascript - 在 CSS 中增加条形动画

Question

是否可以在 css 中创建“生长条”动画？

例子: http://i.stack.imgur.com/lWIkw.gif

如果否，这个 javascript 是正确的方法吗？

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>

工作 Fiddle

提前致谢!

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>