每 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(){
	$("#animated-text").addClass("dancingtext");
  setTimeout(function(){
  	$("#animated-text").removeClass("dancingtext");
  }, 1500);
}, 5000);

div.text{
           font-size:30px;
         <!-- font-weight:bold; -->
         width:auto;
		     margin:30px auto;
         text-align:center;
}
div.dancingtext {		 	 
         -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>