更新每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>