CSS3 애니메이션 @keyframe 슬라이드 쇼 - 프레임에서 멈춤

Question

간단한 프레임을 CSS3으로 프레임 슬라이드 쇼에 만들고 싶습니다.

각 프레임을 몇 번이나 반복할지 정의하고 싶습니다. EG; 프레임 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

자바 스크립트 또는 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>