Question

我想用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网站。

Answer 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>

CSS3动画@keyframe幻灯片放映 - 停止帧

1 个答案: