아래쪽 화살표 바운스 애니메이션 CSS

Question

현재 전체 화면 헤더의 화살표 아래쪽 애니메이션 작업 중입니다.

거의 원하는대로하고 있지만 애니메이션 간격을 설정할 수 없습니다. 그것은 튀어 나와야합니다. 잠시 기다렸다가 다시 시도하십시오.

예를 :

.bounce_arrow { 
    -webkit-animation-name: bounce; 
    -moz-animation-name: bounce; 
    -o-animation-name: bounce; 
    animation-name: bounce;} 

.animated_arrow{ 
-webkit-animation-fill-mode:both; 
-moz-animation-fill-mode:both; 
-ms-animation-fill-mode:both; 
-o-animation-fill-mode:both; 

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

animation-fill-mode:both; 
-webkit-animation-duration:2s; 
-moz-animation-duration:2s; 
-ms-animation-duration:2s; 
-o-animation-duration:2s; 
animation-duration:2s; 
} 


@-webkit-keyframes bounce_arrow { 
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 40% {-webkit-transform: translateY(-30px);} 
    60% {-webkit-transform: translateY(-10px);} 
} 

@-moz-keyframes bounce_arrow { 
    0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);} 
    40% {-moz-transform: translateY(-20px);} 
    60% {-moz-transform: translateY(-10px);} 
} 

Answer 1

그냥 아무것도 할 수 없습니다 애니메이션의 시간을 사용 이 간격 사이의 초 : 2로 대신 2s 분할 모든 비율의

-moz-animation-duration:4s; 

...

@-moz-keyframes bounce_arrow { 
    0%, 10%, 25%, 40%, 50% {-moz-transform: translateY(0);} 
    20% {-moz-transform: translateY(-20px);} 
    30% {-moz-transform: translateY(-10px);} 
    100% {-moz-transform: translateY(0);} // not realy nedded just to be verbose 
} 

사용 4s, 그리고 100 %까지 50 %에서 변화가 없다.

지연 시간이 4 초인 경우 총 6 초를 사용하고 모든 백분율을 3으로 나눕니다.