CSS3动画@keyframe幻灯片放映 - 停止在框架

我想用CSS3制作一个简单的框架我的框架幻灯片放映。CSS3动画@keyframe幻灯片放映 - 停止在框架

我想定义它通过每帧的次数。例如;第3帧/最后一帧就停止。

我在网上找到了很多很棒的CSS3动画演示;但不是很多关于逐帧幻灯片。

EG：我喜欢这个; http://mos.netmagazine.com/site/files/tutorials/assets/2011/08/animation_01.html - 虽然在动画方面不同 - 但我觉得我可以使用@keyframes;问题是 - 我在这里想它VVV

http://www.w3schools.com/css3/tryit.asp?filename=trycss3_animation1

此功能正是我想要的;除了它不会让我用图像替换background:？我怎么能这样做;和最后一块拼图 - 我如何设置一个参数让它在特定的帧处停下来？

最后注 - 这是一个iPad网站。

来源

2012-12-10 Fred Randall

你可以很容易地使用JavaScript或jQuery，但你不能用CSS3做到这一点。您可以这样做：

#images { width: height: } 
#images img { width: height: opacity=0; transition all 5s linear; -moz-transition all 5s linear; -o-transition all 5s linear; -webkit-transition all 5s linear; } 
#images img:target { opacity=1; } 

<div id="images"> <img src="pic1" id="pic1"/> <img src="pic2" id="pic2"> <img src="pic3" id="pic3"/> . . . <img src="picn" id="picn"/> </div> 
<div id="list"> <a href="#pic1">1</a> <a href="#pic2">2</a> <a href="#pic3">3</a> . . . <a href="#picn">n</a> </div>

来源

2012-12-11 15:24:19 Chathuranga

请编辑您的答案并设置其格式以使其可读。 – kleopatra

CSS3动画@keyframe幻灯片放映 - 停止在框架

回答

相关问题