CSS3 动画 @keyframe 幻灯片放映 - 在帧处停止答案

【问题标题】：CSS3 Animation @keyframe slide show - Stop at frameCSS3 动画 @keyframe 幻灯片放映 - 在帧处停止
【发布时间】：2012-12-11 23:52:03
【问题描述】：

我想用 CSS3 为我的框架幻灯片制作一个简单的框架。

我想定义它通过每一帧的次数。例如;第 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 网站的。

【问题讨论】：

标签： ipad css safari

【解决方案1】：

你可以很容易地用 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>

【讨论】：

请编辑您的答案并格式化代码以使其可读。