0

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:？どうすればこれを行うことができますか。パズルの最後のピース-特定のフレームで停止するようにパラメータを設定するにはどうすればよいですか？

最後の注意-これはiPadWebサイト用です。

4

1 に答える 1

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>
于 2012-12-11T15:24:19.870 に答える