Question

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

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

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

我认为您的观察并不完全正确。

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

页面加载，动画立即开始
动画的20％（2秒）后，不再发生变化;图像静止不动
10秒后，动画结束并重新开始，因为您设置了-webkit-animation-iteration-count: infinite;

也许您没有看到动画的第一部分，可能是因为您的浏览器仍在加载。

但是，为防止重复，只需设置

-webkit-animation-iteration-count: 1;

最重要的是，您可能希望阻止10秒动画在8秒内无效，但首先只使用2s动画：

JSFiddle （适用于Firefox）

Answer 2

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

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

@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 {
	animation-name: slidingstep1;
	animation-duration: 10s;
	animation-iteration-count: infinite;         
	animation-direction: normal;
	animation-timing-function: linear;
	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>

CSS动画在页面加载时加载图像

2 个答案: