如何将相同的动画应用到几个li

Question

我有一个列表，其中第二个元素有效。

如何在第一个li上应用相同的效果？

加载页面时不应立即显示第一个li。第一次li第二次出现时应该具有相同的效果，也就是说，与第二次相同

$(document).ready(function(){
    function homeTitleAnimation(){
        var interval;
        var counter = 1;
        var myFunc = function() {
            var cur = $('.main-title ul li').length;

            if(cur == counter) {
               $('.main-title ul li.title-active').removeClass('title-active');
               $('.main-title ul li').first().addClass('title-active');
               counter = 1;
            } else {
                counter++;
                $('.main-title ul li.title-active').removeClass('title-active').next().addClass('title-active');

            }
        };
        interval = setInterval(myFunc, 4000);
    }

    homeTitleAnimation();
});

#header {
    position   : absolute;
    top        : 0;
    center     : 0;
    width      : 100%;
    height     : 200px;
    text-align : center;
    overflow   : hidden;
    z-index    : 20;
}


.main-title {
    color          : #000;
    height         : 115px;
    overflow       : hidden;
    position       : absolute;
    top            : 80%;
    margin-top     : -176px;
    width          : 100%;
    pointer-events : none;
    text-align     : center;
    z-index        : 10;
}


.main-title ul {
    list-style     : none;
    padding        : 0;
    margin         : 10px 0 0;
    position       : relative;
    height         : 100px;
    font-size      : 36px;
    font-weight    : 300;
    text-align     : center;
    font-family    : Arial, sans-serif;
    letter-spacing : 5px;
    text-transform : uppercase;
    z-index        : 100;
}

.main-title ul li {
    width                              : 100%;
    text-align                         : center;
    position                           : absolute;
    opacity                            : 0;
    top                                : 85px;
    line-height                        : 100px;

    -webkit-transition                 : all 0.5s ease-in-out;
    -moz-transition                    : all 0.5s ease-in-out;
    -o-transition                      : all 0.5s ease-in-out;
    transition                         : all 0.5s ease-in-out;
    transition-timing-function         : ease;
    -webkit-transition-timing-function : ease; /* Safari and Chrome */
}

.main-title li.title-active {
    opacity                            : 1;
    top                                : 0;
    -webkit-transition                 : all 1s ease-in-out;
    -moz-transition                    : all 1s ease-in-out;
    -o-transition                      : all 1s ease-in-out;
    transition                         : all 1s ease-in-out;
    transition-timing-function         : ease;
    -webkit-transition-timing-function : ease; /* Safari and Chrome */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kithomepage.com/sos/jquery.royalslider.min.js"></script>

<div id="header" class="hidden-xs">
    <div style="margin-top: 100px;">

        <div class="main-title">
            <ul>
                <li class="title-active">Script produced with</li>
                <li>jquery.min.js</li>
                <li>jquery.royalslider.min.js</li>
            </ul>
        </div>
    </div>
</div>

如果我在列表顶部放置一个空的li，它将按照我想要的方式工作

  <ul>
      <li class="title-active"></li>
      <li>Script produced with</li>
      <li>jquery.min.js</li>
 </ul>

请参阅下面的示例

$(document).ready(function(){
    function homeTitleAnimation(){
        var interval;
        var counter = 1;
        var myFunc = function() {
            var cur = $('.main-title ul li').length;
            if(cur == counter) {
                $('.main-title ul li.title-active').removeClass('title-active');
                $('.main-title ul li').first().addClass('title-active');
                counter = 1;
            } else {
                counter++;
                $('.main-title ul li.title-active').removeClass('title-active').next().addClass('title-active');

            }
        };
        interval = setInterval(myFunc, 4000);
    }

    homeTitleAnimation();
});

#header {
    position   : absolute;
    top        : 0;
    center     : 0;
    width      : 100%;
    height     : 200px;
    text-align : center;
    overflow   : hidden;
    z-index    : 20;
}


.main-title {
    color          : #000;
    height         : 115px;
    overflow       : hidden;
    position       : absolute;
    top            : 80%;
    margin-top     : -176px;
    width          : 100%;
    pointer-events : none;
    text-align     : center;
    z-index        : 10;
}


.main-title ul {
    list-style     : none;
    padding        : 0;
    margin         : 10px 0 0;
    position       : relative;
    height         : 100px;
    font-size      : 36px;
    font-weight    : 300;
    text-align     : center;
    font-family    : Arial, sans-serif;
    letter-spacing : 5px;
    text-transform : uppercase;
    z-index        : 100;
}

.main-title ul li {
    width                              : 100%;
    text-align                         : center;
    position                           : absolute;
    opacity                            : 0;
    top                                : 85px;
    line-height                        : 100px;

    -webkit-transition                 : all 0.5s ease-in-out;
    -moz-transition                    : all 0.5s ease-in-out;
    -o-transition                      : all 0.5s ease-in-out;
    transition                         : all 0.5s ease-in-out;
    transition-timing-function         : ease;
    -webkit-transition-timing-function : ease; /* Safari and Chrome */
}

.main-title li.title-active {
    opacity                            : 1;
    top                                : 0;
    -webkit-transition                 : all 1s ease-in-out;
    -moz-transition                    : all 1s ease-in-out;
    -o-transition                      : all 1s ease-in-out;
    transition                         : all 1s ease-in-out;
    transition-timing-function         : ease;
    -webkit-transition-timing-function : ease; /* Safari and Chrome */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kithomepage.com/sos/jquery.royalslider.min.js"></script>

<div id="header" class="hidden-xs">
    <div style="margin-top: 100px;">

        <div class="main-title">
            <ul>
                <li class="title-active"></li>
                <li>Script produced with</li>
                <li>jquery.min.js</li>

            </ul>
        </div>
    </div>
</div>