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

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

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

我想在页面渲染上通过PHP设置从0到$的动画.因此动画强制的初始状态为宽度：0px,最终宽度为：{$value}％;

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

JSFiddle Demo

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