css镜像垂直动态导航栏

<div class="container">
        <div class="box"><li class="text">first</li ></div>
        <div class="box"><li class="text">second</li></div>
        <div class="box"><li class="text">third</li></div>
        <div class="box"><li class="text">forth</li></div>
        <div class="box"><li class="text">fifth</li></div>
        <div class="box"><li class="text">sixth</li></div>
</div>
<script>
    //For Demo only
    var box = document.getElementsByClassName('box');
    console.log(box);
    for(var i = 0; i < box.length; i++)
        addClass(box,i);


    function addClass(box,id){
        setTimeout(function(){
            if(id > 0) {
                console.log(box[id-1].classList);
                box[id-1].classList.remove('hover');
            }
            box[id].classList.add('hover');
        }, id*750);
    }
</script>
html,body{
    width: 100%;
    height: 100%;
    margin:0;
    padding:0;
    background:lightgray;
}
.container{
    position:absolute;
    width:30%;
    height:50%;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    background:black;
    color:white;
}
.box{
    position:relative;
    width:100%;
    height:16%;
    overflow:hidden;
}
.text{
    display:inline-block;
    width:100%;
    height:51.75px;
    line-height:51.75px;
    text-align:center;
    vertical-align:middle;
    list-style-type:none;
    text-shadow:0 -40px 0 whitesmoke;
    transition:all 1s;
    transition-delay: 0.5s;
    transform:translateY(100%) ;
}
.box:after{
    position:absolute;
    content:"";
    left:-100%;
    width:80%;
    bottom:50%;
    border-bottom:2px solid floralwhite ;
    transition:all 0.5s;
    transition-delay: 1s;
}
.box:hover .text,
.box.hover .text{
    transform:translateY(0%) scale(1.1);
    font-weight:100;
}
.box:hover:after,
.box.hover:after{
    left:200%;
}

碰到了一个问题定义了类在元素上，而且设定来元素的动态效果，那么动态效果是否一直在保持？

结果不是，证明了在内部定义了动态效果，但元素并不会一直运动，而是只运动一次。

js脚本中，为元素添加类，classList.add();移除classList.remove();