html - CSS 动画循环淡入淡出 1-2-3-1-2-3-1-2

Question

我有带关键帧的文本过渡，有 3 个标题，它们会一个接一个地淡入和淡出它工作正常但我希望它在所有三个关键帧完成后再次回到一个

它应该在所有 child 完成后无限工作

动画序列

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);