CSS动画加载页面时加载图片

Question

我一直试图在网站中添加CSS滑动动画。我面临的问题是，当我使这个脚本生效时，图像首先被加载到网站中，并在某段时间后动画开始。

我只想在页面加载时在网站上开始动画。

Fiddle

HTML：

<div id="slide1" style="position:absolute"> 
    <img src="http://rilwis.googlecode.com/svn/trunk/demo/5.jpg"> 
</div> 

CSS：

<style> 
    @-webkit-keyframes slidingstep1 { 
    0% { left: -100px; opacity:0;} 
    5% { left: -75px; opacity:0.2;} 
    10% { left: -50px; opacity:0.4;} 
    15% { left: -25px; opacity:0.6;}  
    20% { left: 0px;opacity:1; } 
    100% { left: 0px;opacity:1; } 
    } 

    #slide1 { 
    -webkit-animation-name: slidingstep1; 
    -webkit-animation-duration: 10s; 
    -webkit-animation-iteration-count: infinite;   
    -webkit-animation-direction: normal; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-fill-mode: forwards; 
    } 
</style> 

Answer 1

您需要添加$(window).load(function() {}功能

$(window).load(function() {  
 
    $("#slide1").fadeOut("fast"); 
 
});

@keyframes slidingstep1 { 
 
\t 0% { left: -100px; opacity:0;} 
 
\t 5% { left: -75px; opacity:0.2;} 
 
\t 10% { left: -50px; opacity:0.4;} 
 
\t 15% { left: -25px; opacity:0.6;}  
 
\t 20% { left: 0px;opacity:1; } 
 
\t 100% { left: 0px;opacity:1; } 
 
} 
 
#slide1 { 
 
\t animation-name: slidingstep1; 
 
\t animation-duration: 10s; 
 
\t animation-iteration-count: infinite;   
 
\t animation-direction: normal; 
 
\t animation-timing-function: linear; 
 
\t animation-fill-mode: forwards; 
 
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="slide1" style="position:absolute"><img src="http://rilwis.googlecode.com/svn/trunk/demo/5.jpg"></div>

Answer 2

我觉得你的观察并不完全正确。

你说，页面加载和动画稍后发生。但我看到的是不同的东西：

1. 页面加载，动画立即
2. 启动动画（2秒），没有变化再发生的20％之后;图像静止
3. 10秒后，动画已经结束，开始一遍又一遍，因为你设置-webkit-animation-iteration-count: infinite;

也许你我以前不看动画的第一部分，也许是因为你的浏览器仍然加载。

然而，为了避免重复，只设置

-webkit-animation-iteration-count: 1; 

最重要的是，你可能想阻止一个10秒的动画，什么也不做，持续8秒，但只使用一个2秒的动画第一地点：

JSFiddle（在Firefox作品）