使 Css3 过渡适用于页面加载 [重复]答案

【问题标题】：Making Css3 Transitions work on Page Load [duplicate]使 Css3 过渡适用于页面加载 [重复]
【发布时间】：2012-07-08 23:36:52
【问题描述】：

可能重复：
css3 transition animation on load?

我想将页面加载上的进度条从 0% 变为 60%。请在下面找到我的小提琴。我尝试使用 css 转换属性，但无法实现。

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

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

谢谢

【问题讨论】：

过渡是基于事件的，这意味着在页面加载后它无法在没有任何 JS 的情况下工作。您需要:hover 或其他类似的东西才能使其工作。我建议在这种情况下使用 JS。也许其他人可以证实这一点。
感谢 Sn0opy。实际上，我想根据我对页面加载的要求在不悬停的情况下实现它。
完全使用Javascript怎么样？由于您希望它作为后备，您也可以将它用于每个浏览器。
感谢 Sn0opy 我使用 Jquery 实现了同样的目标。请让我知道我们只能使用 CSS3 jsfiddle.net/meetravi/5zJPr/3 来实现这一点
感谢您告诉我。布拉姆·范罗伊

【解决方案1】：

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

【讨论】：

【解决方案2】：

您可以使用 CSS3 动画来做到这一点，但要小心——它们并未得到广泛支持。 Here's an updated jsFiddle.

animation: width <duration> <easing>;

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

【讨论】：