箭頭向下彈跳動畫css

目前我正在爲全屏幕標題向下箭頭動畫。箭頭向下彈跳動畫css

它幾乎是做我想要的，但我不能設置動畫之間的間隔。它應該反彈。等待幾秒鐘，然後重複。

.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);} 
}

來源

2017-09-05 user2180331

你有一些HTML去與它？ – Amit

[CSS動畫延遲重複]的可能重複（https://stackoverflow.com/questions/13887889/css-animation-delay-in-repeating） –

只是用動畫的一段時間，什麼也不做：

例如2秒的間隔：

-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代替2s把所有百分比2，並有50％至100％，沒有變化。

對於4秒的延遲，使用總共6秒並將所有百分比除以3，依此類推。

來源

2017-09-05 14:43:18

箭頭向下彈跳動畫css

回答

相關問題