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

Question

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

The next major version of capybara-webkit will require at least version 5.0 of Qt. You're using version 4.8.6.

我希望它能从0到<div class="bar" style="width:{$value}%;"></div> 设置动画，这是由页面渲染上的PHP设置的。因此动画强制的初始状态为$value，最终状态为width: 0px

Answer 1

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

JSFiddle Demo

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

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

{{1}}