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

Posted 2023-03-06

【中文标题】使 Css3 过渡适用于页面加载 [重复]

【英文标题】：Making Css3 Transitions work on Page Load [duplicate]

【发布时间】：2012-07-08 23:36:52

【问题描述】：

可能重复：css3 transition animation on load?

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

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

我已经使用 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%; 
​

【讨论】：

感谢 minitech 正是我想要的 :)