使Css3过渡在页面加载上起作用

Question

  

可能重复：
  css3 transition animation on load?

我想设置页面加载的进度条从0％到60％。请在下面找到我的小提琴。我试过用css过渡属性，无法实现它。

http://jsfiddle.net/meetravi/5zJPr/2/

我已经使用Jquery实现了它。请找下面的小提琴。 http://jsfiddle.net/meetravi/5zJPr/3/

我想知道是否可以使用CSS3解决方案？ 如果在页面加载时无法进行CSS3动画？有人可以清楚地解释为什么CSS强制等待页面中的事件说明悬停或点击动画会发生而不是让它在页面加载时工作吗？

由于

Answer 1

你可以使用CSS3动画做到这一点，但要小心 - 它们并没有被广泛支持。 Here's an updated jsFiddle.

animation: width <duration> <easing>;

@keyframes width {
    from { width: 0%; }
    to   { width: 60%; }
}​

Answer 2

如果没有JavaScript或jQuery，这是不可能的。