CSS Textアニメーションの時間延長を5秒ごとに更新

Question

CSSを使用してジャンプするテキストアニメーションを作成しました。うまくいきましたが、そのアニメーションのいくつかのタイミングの変更を更新したいと思います。現在、アニメーションは無期限に1秒ごとに発生します。しかし、私はこのアニメーションをすべて無制限で5秒に更新したいと思います。

DEMO

div.dancingtext { 
 
    font-size: 30px; 
 
    width: auto; 
 
    margin: 30px auto; 
 
    text-align: center; 
 
    -webkit-animation: jump 1.5s ease 0s infinite normal; 
 
    animation: jump 1.5s ease 0s infinite normal; 
 
} 
 

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

 
@keyframes jump { 
 
    0% { 
 
    transform: translateY(0); 
 
    } 
 
    20% { 
 
    transform: translateY(0); 
 
    } 
 
    40% { 
 
    transform: translateY(-30px); 
 
    } 
 
    50% { 
 
    transform: translateY(0); 
 
    } 
 
    60% { 
 
    transform: translateY(-15px); 
 
    } 
 
    80% { 
 
    transform: translateY(0); 
 
    } 
 
    100% { 
 
    transform: translateY(0); 
 
    } 
 
}

<div class='dancingtext'>Dancing Text!</div>

Answer 1

残念ながら、ループされたアニメーションの遅れのための組み込み関数がありません。しかし、あなたは

div.dancingtext { 
 
    font-size: 30px; 
 
    width: auto; 
 
    margin: 30px auto; 
 
    text-align: center; 
 
    animation: jump 6.5s ease 0s infinite normal; 
 
} 
 

 
@keyframes jump { 
 
    0% { 
 
    transform: translateY(0); 
 
    } 
 
    3% { 
 
    transform: translateY(-30px); 
 
    } 
 
    6% { 
 
    transform: translateY(0); 
 
    } 
 
    9% { 
 
    transform: translateY(-15px); 
 
    } 
 
    12% { 
 
    transform: translateY(0); 
 
    } 
 
    12%, 
 
    100% { 
 
    transform: translateY(0); 
 
    } 
 
}

<div class='dancingtext'>Dancing Text!</div>

キーフレームは、あなたがしたい任意の値の組み合わせを使用することができますCSSでアニメーションで作業するのは非常に柔軟性があり、すなわち、すべてのキーフレームにわずかなオフセットを使用してこの効果を実現することができます所望の効果を達成する。私はあなたがそのアイデアを得ることを望みます。

注：このブラウザのプレフィックスを追加して、すべてのブラウザで が動作することを確認してください。

Answer 2

次のコードを試してみてください。使用されたjQuery。

setInterval(function(){ 
 
\t $("#animated-text").addClass("dancingtext"); 
 
    setTimeout(function(){ 
 
    \t $("#animated-text").removeClass("dancingtext"); 
 
    }, 1500); 
 
}, 5000);

div.text{ 
 
      font-size:30px; 
 
     <!-- font-weight:bold; --> 
 
     width:auto; 
 
\t \t  margin:30px auto; 
 
     text-align:center; 
 
} 
 
div.dancingtext { \t \t \t 
 
     -webkit-animation: jump 1.5s ease 0s infinite normal ; 
 
     animation: jump 1.5s ease 0s infinite normal ; 
 
     } 
 
     @-webkit-keyframes jump { 
 
     0%{ 
 
     -webkit-transform: translateY(0); 
 
     transform: translateY(0); 
 
     } 
 
     20%{ 
 
     -webkit-transform: translateY(0); 
 
     transform: translateY(0); 
 
     } 
 
     40%{ 
 
     -webkit-transform: translateY(-30px); 
 
     transform: translateY(-30px); 
 
     } 
 
     50%{ 
 
     -webkit-transform: translateY(0); 
 
     transform: translateY(0); 
 
     } 
 
     60%{ 
 
     -webkit-transform: translateY(-15px); 
 
     transform: translateY(-15px); 
 
     } 
 
     80%{ 
 
     -webkit-transform: translateY(0); 
 
     transform: translateY(0); 
 
     } 
 
     100%{ 
 
     -webkit-transform: translateY(0); 
 
     transform: translateY(0); 
 
     } 
 
     } 
 
     @keyframes jump { 
 
     0%{ 
 
     transform: translateY(0); 
 
     } 
 
     20%{ 
 
     transform: translateY(0); 
 
     } 
 
     40%{ 
 
     transform: translateY(-30px); 
 
     } 
 
     50%{ 
 
     transform: translateY(0); 
 
     } 
 
     60%{ 
 
     transform: translateY(-15px); 
 
     } 
 
     80%{ 
 
     transform: translateY(0); 
 
     } 
 
     100%{ 
 
     transform: translateY(0); 
 
     } 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="animated-text" class='text'>Dancing Text!</div>