CSS 애니메이션 타이밍을 조정하는 방법은 무엇입니까?

회전 및 페이드 인을하는 CSS가 아래에 있는데 잘 작동합니다. 회전/페이드는 원하는대로 타이밍이 맞지만 30 초 정도의 회전/페이드 사이의 시간이 길어지기를 바랍니다. 길이를 늘리면 회전/페이드가 너무 느려집니다. 회전/회전 타이밍을 유지하면서 회전/페이드간에 30 초를 허용하도록 키 프레임을 설정하려면 어떻게해야합니까? 검색했지만 적용 가능한 답을 찾을 수 없습니다. 고맙습니다.CSS 애니메이션 타이밍을 조정하는 방법은 무엇입니까?

@-webkit-keyframes SomeName { 
0% { opacity:0; -webkit-transform: rotateY(180deg); } 
50% { opacity:0; -webkit-transform: rotateY(180deg); } 
75% { opacity:1; -webkit-transform: rotateY(0deg); } 
100% { opacity:1; -webkit-transform: rotateY(0deg); } 
} 

#flipBox img.flippy { 
-webkit-animation-name: SomeName; 
-webkit-animation-timing-function: ease-in-out; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-duration: 10s; 
-webkit-animation-direction: alternate; 
}

p.s. FYI : 이것은 웹킷 전용이므로 유일한 접두어입니다.

출처

2013-03-12 user2161038

다음은 유용한 참고 자료입니다. http://coding.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/ –

감사합니다. Billy. – user2161038

간단한 해결책이없는 것 같습니다. 기간을 동적으로 변경하기위한 요구 사항이 있습니까? 그렇지 않다면'@ 키 프레임 '에서 비율을 조정하는 것이 가장 쉬운 방법 일 것입니다. – rhgb

Live Demo

사용이 코드

animation:SomeName 5s; 
-moz-animation:SomeName 5s; /* Firefox */ 
-webkit-animation:SomeName 5s; /* Safari and Chrome */ 
-o-animation:SomeName 5s; /* Opera */

이 당신을 도울 것입니다 희망.

출처

2013-03-12 13:27:14

입력 해 주셔서 감사합니다. Sandeep. 하지만 당신의 데모에서 보여준 색상으로 보았 듯이, 나의 예제 작업을 똑같은 부분으로 만드는데 아무런 문제가 없습니다. 그러나 페이드/로테이션을 10 초로 설정하고 30 초가 지나면 다시 반복하지 않기를 바랍니다. 지속 시간을 늘릴 수는 있지만 페이드/회전 속도는 동일하게 유지되지 않습니다. – user2161038

CSS 애니메이션 타이밍을 조정하는 방법은 무엇입니까?

답변

관련 문제