不定期のCSSアニメーションで一時停止

Question

私はバウンスするこの矢印を作成しました。バウンスの間に2秒間ポーズを追加したいと思います。私はここでいくつかの類似の例を見つけましたが、私の矢では動作しませんでした（バウンスアニメーションを変更しました）。

私は一時停止を取得したが、一度だけ、次の追加した場合：とにかく

-webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */ 
animation-delay: 2s; 

を、ここでのコードは次のとおりです。

HTML：

<div class="btn-bottom"></div> 

はCSS：

.btn-bottom{ 
    width: 48px; 
    height: 58px; 
    background: url("https://d30y9cdsu7xlg0.cloudfront.net/png/10897-200.png") 
    center center no-repeat; 
    background-size: 47px; 
    margin: auto; 
    top: 40px; 
    left: 0; 
    right: 0; 
    cursor: pointer; 
    -webkit-animation: bounce 2.5s infinite; 
    animation: bounce 2.5s infinite; 
} 

@-webkit-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% { 
     -webkit-transform: translateY(0); 
    } 
    40% { 
     -webkit-transform: translateY(-30px); 
    } 
    60% { 
     -webkit-transform: translateY(-15px); 
    } 
} 
@-moz-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% { 
     -moz-transform: translateY(0); 
    } 
    40% { 
     -moz-transform: translateY(-30px); 
    } 
    60% { 
     -moz-transform: translateY(-15px); 
    } 
} 
@keyframes bounce { 
    0%, 20%, 50%, 80%, 100% { 
     -webkit-transform: translateY(0); 
     -moz-transform: translateY(0); 
     -ms-transform: translateY(0); 
     -o-transform: translateY(0); 
     transform: translateY(0); 
    } 
    20%, 50%, 80%, 100% { 
     -webkit-transform: translateY(0); 
     -moz-transform: translateY(0); 
     -ms-transform: translateY(0); 
     -o-transform: translateY(0); 
     transform: translateY(0); 
    } 
    40% { 
     -webkit-transform: translateY(-30px); 
     -moz-transform: translateY(-30px); 
     -ms-transform: translateY(-30px); 
     -o-transform: translateY(-30px); 
     transform: translateY(-30px); 
    } 
    60% { 
     -webkit-transform: translateY(-15px); 
     -moz-transform: translateY(-15px); 
     -ms-transform: translateY(-15px); 
     -o-transform: translateY(-15px); 
     transform: translateY(-15px); 
    } 
} 

JSFIDDLE：

https://jsfiddle.net/92xmw541/

Answer 1

最も簡単な方法は、長いアニメーションの期間（以下4S）を作成し、キーフレームでアニメーション時間の半分を使用することです。残りのキーフレームはオブジェクトが静止しています。この動作のための唯一の解決策は、

.btn-bottom { 
 
    width: 48px; 
 
    height: 58px; 
 
    background: url("https://d30y9cdsu7xlg0.cloudfront.net/png/10897-200.png") center center no-repeat; 
 
    background-size: 47px; 
 
    margin: auto; 
 
    top: 40px; 
 
    left: 0; 
 
    right: 0; 
 
    cursor: pointer; 
 
    animation: bounce 4s infinite; 
 
} 
 

 
@keyframes bounce { 
 
    10%, 
 
    20%, 
 
    30%, 
 
    40%, 
 
    50% { 
 
    transform: translateY(0); 
 
    } 
 
    15% { 
 
    transform: translateY(-30px); 
 
    } 
 
    25% { 
 
    transform: translateY(-15px); 
 
    } 
 
    35% { 
 
    transform: translateY(-5px); 
 
    } 
 
    45% { 
 
    transform: translateY(-2px); 
 
    } 
 
}

<div class="btn-bottom"></div>