html - 在不使用 jquery -> www.mohitarya.co.nf 的情况下加载页面时需要动画开始

Question

这是我用于水平移动的 CSS。

.h float {

animation-name: hfloating;
-webkit-animation-name: hfloating;

animation-duration: 30s;    
-webkit-animation-duration: 30s;

animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;

@keyframes hfloating {

0% {
    transform: translateX(-160%);   
}
50% {
    transform: translateX(170%);
    webkit-transform: translateX(170%);     
}   
100% {
    transform: translateX(-160%);
}           

@-webkit-keyframes hfloating {

0% {
    -webkit-transform: translateX(-160%);   
}
50% {
    -webkit-transform: translateX(170%);    
    -webkit-transform: translateX(170%);    
}   
100% {
    -webkit-transform: translateX(-160%);   
}           

}}

问..gif 文件能否在页面加载后开始动画？

Answer 1

不幸的是，它不能用 css 来完成，因为 css 不是一种编程语言，它只是一种样式标记。

您必须使用 JavaScript 才能获得所需的结果。你基本上想要做的是在页面加载后将类名附加到你的元素。
为此，您需要执行以下步骤:

• 您没有为您的元素设置类，而是设置了一个 ID，以便您以后可以找到它
• 将您的元素设置为动画的第一帧，这样它就不会卡在屏幕上
• 等到页面完全加载
• 将类附加到您的元素，它将使其运行动画

这是一个示例(src 链接用于 jsfiddle):

html:

<div id="test_floater"></div>
<iframe src="/three"></iframe>
<iframe src="/three"></iframe>
<iframe src="/three"></iframe>
<iframe src="/three"></iframe>

添加到您的 CSS:

#test_floater {
    -webkit-transform: translateX(-160%);
}

JavaScript

window.onload = function () {
    var floater_temp= document.getElementById("test_floater");
    floater_temp.className = floater_temp.className + " hfloating";
}

-- window.onload 在异步内容(如 iframe 内容)加载后执行，不同于 document.onload 在 DOM 加载后运行。

实例: Fiddle