Can't stop all CSS animations on hover over one or another

Question

I made a Marquee like element with css animations tools. It's like a breaking news ticker, with some news titles scrolling over and over again. My intention is to stop the scrolling with cursor hovering it. But I did trick to not getting a huge white space between the last and the first news when loops over all of them. The trick is writing the array twice and making 2 different animations for them, here's the code:

.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>

The problem is that (as you can see) when I hover, it stops only the div which is showing that moment, the other one continues scrolling. How can I make to both animations stop?

Answer 1

Put the :hover event on the marquee itself and give the 2 arrays the same class name so when you hover it stops both of them instead of just one.

.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 .item-container {
    -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%);
    }
}

.marquee:hover .item-container{
                    -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 class="item-container">
                            <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 class="item-container">
                            <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>