Html CSS动画循环淡入&；出局1-2-3-1-2-3-1-2

我有文本过渡与关键帧，有3个标题，将淡入淡出分别一个接一个它是工作正常，但我想它回到一个再次当所有三个关键帧完成

在完成对所有子对象的操作后，它应该可以无限工作

动画序列

1-2-3-1-2……依此类推

CSS:

以下是HTML：

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

Hello标题1
标题2
标题3

JSFiddle： 使用此代码

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

setInterval（函数（）{
var x=0；
对于（var i=1；i
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);