css的animation怎么设置图片循环播放（无后退）而不是播完最后一张又倒退回第一张放

html-css033

css的animation怎么设置图片循环播放（无后退）而不是播完最后一张又倒退回第一张放,第1张

肯定是做2张同样的第一张图片的，做的不好的视觉上会认为有退回去的感觉，那是没有理解这个循环的本质，在css里，计算机不会把这些图片看成桶状去循环，图片永远是平面的，所以第一张图片过渡时间+最后一张图片过渡时间=其他任意一张图片的过渡时间，这样衔接才完美，由于人眼的视觉停留错位差，你不能让图片过渡时间过长，每个人的视觉停留时间是不一致的，你可以自己设定你认为的时间，比如5张图片5秒循环完，也就是duration设置5s，必须设置direction，速度曲线根据自己喜好设，没有动感的过渡是不完美的

ideahub如何循环播放多张图片

IdeaHub可以使用CSS3的animation属性来实现循环播放多张图片。下面是一个简单的示例：

HTML：

<div class="slideshow">

<img src="image1.jpg" />

<img src="image2.jpg" />

<img src="image3.jpg" />

<img src="image4.jpg" />

</div>

CSS：

.slideshow {

width: 500px

height: 500px

overflow: hidden

position: relative

}

.slideshow img {

position: absolute

animation: slideshow 5s infinite

}

@keyframes slideshow {

0% {

left: 0px

}

25% {

left: -500px

}

50% {

left: -1000px

}

75% {

left: -1500px

}

100% {

left: 0px

}

}

<DIV id=demo_1 style="OVERFLOW: hiddenHEIGHT: 136px">

<DIV id=demo1_1>

<div id=gleft>

<a href=""><img src="" border="0" width=150 height="120"/></a>

</div>

<div id=gleft>

<a href=""><img src="" border="0" width=150 height="120"/></a>

</div>

<div id=gleft>

<a href=""><img src="" border="0" width=150 height="120"/></a>

</div>

<div id=gleft>

<a href=""><img src="" border="0" width=150 height="120"/></a>

</div>

</DIV>

<DIV id=demo2_1></DIV></DIV>

<SCRIPT>

var speed=25

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else{

demo.scrollLeft++

}

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </SCRIPT>

其中<div id=gleft>这里的gleft的样式你自己定义下就OK了