CSS动画宽度从0px到内联css定义的%值

Question

有没有一种方法可以使用没有javascript的纯CSS来动画元素的宽度到服务器生成的值？假设我有这个div:

<div class="bar" style="width:{$value}%;"></div>

我希望它从0到动画$value设置由PHP在页面渲染上设置.所以动画强迫的初始状态将是width: 0px最终的width: {$value}%;

Answer 1

使用动画的工作解决方案:

JSFiddle演示

<div class="bar" style="width:80%;"></div> <!-- where 80% is the PHP value-->

.bar{
  background: lime;
  padding: 30px 0;
  animation: test 2s;
}

@keyframes test {
  0% {width: 0;}
}