2014-04-17 5 views
1

나는 한 번 회전 한 다음 멈추는 애니메이션 페이지를 웹 페이지에 가지고 있습니다.CSS 애니메이션 파이어 폭스에서 반복하기

이 크롬/IE에서 잘 작동하지만, 파이어 폭스에서 루프가 무한 ...

-webkit-animation:.75s rotateLast ease; 
-webkit-animation-fill-mode:forwards; 
-moz-animation:.75s rotateLast ease; 
-moz-animation-fill-mode:forwards; 
animation:.75s rotateLast ease; 
animation-fill-mode:forwards; 

는 아무도 내가 잘못하고있을 수도 있고, 누군가가 전에 본 경험 것을 볼 수 있을까요?

@-webkit-keyframes rotateFirst { 
    0% {-webkit-transform:rotate(180deg);} 
    100% {-webkit-transform:rotate(0deg);opacity:1} 
} 

@-webkit-keyframes rotateLast { 
    0% {-webkit-transform:rotate(-180deg);} 
    100% {-webkit-transform:rotate(0deg);opacity:1} 
} 

@keyframes rotateFirst { 
    0% {transform:rotate(180deg);} 
    100% {transform:rotate(0deg);opacity:1} 
} 

@keyframes rotateLast { 
    0% {transform:rotate(-180deg);} 
    100% {transform:rotate(0deg);opacity:1} 
} 

@-moz-keyframes rotateFirst { 
    0% {transform:rotate(180deg);} 
    100% {transform:rotate(0deg);opacity:1} 
} 

@-moz-keyframes rotateLast { 
    0% {transform:rotate(-180deg);} 
    100% {transform:rotate(0deg);opacity:1} 
} 

답변

2

추가 :

animation-iteration-count:1; 
-moz-animation-iteration-count:1; 
-webkit-animation-iteration-count:1; 

From MDN

애니메이션 - 반복 카운트 CSS 속성이 시간 애니메이션주기의 수를 정의는 중지하기 전에 재생할 수 있습니다.

+0

감사합니다. @ SW4,하지만 여전히 반복 되나요? – Liam

+0

jsfiddle.net을 제공 할 수 있습니까? – SW4

+0

체크 - 여기 잘 보인다 : http://jsfiddle.net/V7TV5/1/ – SW4

관련 문제