Question

我有关键帧的文本转换，有3个标题会淡入＆amp;分别一个接一个地工作正常但是我希望它在三个完成关键帧时再次回到一个

完成所有孩子

后，它应该无限制地工作

动画序列

1-2-3-1-2 ....等等

CSS：

h2 {
  position: absolute;

  opacity: 0;
  -webkit-animation: fadeOut 3s ease-out forwards;
  animation: fadeOut 3s ease-out forwards;
}

@-webkit-keyframes fadeOut {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes fadeOut {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

h2:nth-child(1) {animation-delay: 0s;}
h2:nth-child(2) {animation-delay: 3s;}
h2:nth-child(3) {animation-delay: 6s;}

这是HTML：

<h2>Hello Heading 1</h2>
<h2>Heading 2</h2>
<h2>Heading 3</h2>

JSFiddle： https://jsfiddle.net/Lq4w007u/

Answer 1

使用此代码

setInterval(function(){ 
    var x = 0;
    for(var i=1; i<=3; i++){
      $("h2:nth-child(i)").css("animation-delay", "x.'s'");

      x = x+3;
    }

$("h2").css({
"animation": "fadeOut",
"animation-duration": "3s",
"animation-timing-function": "ease-out"
})

}, 12000);

CSS动画循环淡入＆amp;出1-2-3-1-2-3-1-2

1 个答案: