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

Question

可能重复:
加载时css3过渡动画？

我想动画页面加载的进度条从0%到60%.请在下面找到我的小提琴.我试过用css过渡属性,无法实现它.

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

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

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

谢谢

Answer 1

你可以使用CSS3动画来做到这一点,但要小心 - 它们并没有被广泛支持.这是一个更新的jsFiddle.

animation: width <duration> <easing>;

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