我用css动画工具做了一个像选框一样的元素。 它就像是一个突发新闻的记录器，一些新闻标题一遍又一遍地滚动着。 我的意图是停止滚动与光标悬停它。 但是当我在最后一条和第一条新闻之间循环时，我没有弄到一个很大的空白。 技巧是将数组写入两次，并为它们制作两个不同的动画，下面是代码:

null

.marquee{
    position: relative;
    height: 4rem;
    overflow: hidden;
    background-color: #df3e3e;
}

.scroll{
    width: 100%;
    display: flex;
} 

.item:after {
    content: "|";
    margin: 0 0.5em 0 0.5em;
    font-size: 2rem;
    font-weight: 700;    
}

.scroll div{    
    height: 4rem;
    font-size: 2rem;
    line-height: 4rem;    
    color: #000;    
    white-space: nowrap;
    text-transform: uppercase;
    font-weight: 700;
    
    -webkit-animation: animate 70s linear infinite;
    -webkit-animation-delay: -70s;
    
    -moz-animation: animate 70s linear infinite;
    -moz-animation-delay: -70s;
    
    -o-animation: animate 70s linear infinite;
    -o-animation-delay: -70s;
    
    animation: animate 70s linear infinite;
    animation-delay: -70s;
}

.scroll div:nth-child(2) {
    -webkit-animation: animate2 70s linear infinite;
    -webkit-animation-delay: -35s;
    
    -moz-animation: animate2 70s linear infinite;
    -moz-animation-delay: -35s;
    
    -o-animation: animate2 70s linear infinite;
    -o-animation-delay: -35s;
    
    animation: animate2 70s linear infinite;
    animation-delay: -35s;
}

@-webkit-keyframes animate {
    0% 
    {        
        transform: translateX(100%);
    }
    100% 
    {        
        transform: translateX(-100%);
    }
}
@-webkit-keyframes animate2 {
    0% 
    {        
        transform: translateX(0);
    }
    100% 
    {        
        transform: translateX(-200%);
    }
}

@-moz-keyframes animate {
    0% 
    {        
        transform: translateX(100%);
    }
    100% 
    {        
        transform: translateX(-100%);
    }
}
@-moz-keyframes animate2 {
    0% 
    {        
        transform: translateX(0);
    }
    100% 
    {        
        transform: translateX(-200%);
    }
}

@-o-keyframes animate {
    0% 
    {        
        transform: translateX(100%);
    }
    100% 
    {        
        transform: translateX(-100%);
    }
}
@-o-keyframes animate2 {
    0% 
    {        
        transform: translateX(0);
    }
    100% 
    {        
        transform: translateX(-200%);
    }
}

@keyframes animate {
    0% 
    {        
        transform: translateX(100%);
    }
    100% 
    {        
        transform: translateX(-100%);
    }
}
@keyframes animate2 {
    0% 
    {        
        transform: translateX(0);
    }
    100% 
    {        
        transform: translateX(-200%);
    }
}

.scroll div:hover{
                    -webkit-animation-play-state: paused;
                    -moz-animation-play-state: paused;
                    -o-animation-play-state: paused;
                    animation-play-state: paused;
                    cursor: pointer;
                }

<div class="container-fluid">
                <div class="marquee">
                    <div class="scroll">
                        <div>
                            <span class="item">Item 1</span> <span class="item">Item 2</span> <span class="item">Item 3</span> <span class="item">Item 4</span>
                        </div>
                        <div>
                            <span class="item">Item 1</span> <span class="item">Item 2</span> <span class="item">Item 3</span> <span class="item">Item 4</span>
                        </div>
                    </div>
                </div>    
            </div>

null

问题是（如你所见）当我悬停时，它只停止显示那个时刻的div，另一个继续滚动。 我怎样才能使两个动画都停止？