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

Question

有没有一种方法可以在没有 javascript 的情况下使用纯 CSS 将元素的宽度动画化为服务器生成的值？假设我有这个 div:

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

我希望它从 0 到 $value 动画，这是由 PHP 在页面呈现时设置的。因此，动画强制的初始状态为 width: 0px，最终状态为 width: {$value}%;

Answer 1

使用动画的可行解决方案:

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