CSS animate width from 0px to inline css defined % value

Question

Is there a way with pure CSS without javascript to animate element's width to server generated value? Let's say I have this div:

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

I would like it to animate from 0 to $value that is set by PHP on page render. So initial state forced by animation would be width: 0px and the final would be width: {$value}%;

Answer 1

A working solution using animation:

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