更新每5秒CSS文本動畫時間持續時間

Question

我已經使用CSS創建了跳躍文本動畫。它運行良好，但我想更新該動畫中的一些時間更改。目前動畫每秒發生，持續時間無限。但我想更新這個動畫每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與動畫工作，你可以使用任何你喜歡的值組合來達到這種效果達到預期的效果。我希望你明白這個主意。

注意：請添加這些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>