css镜像垂直动态导航栏

        
first
        
second
        
third
        
forth
        
fifth
        
sixth


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