JS code interfere with CSS code transform animation

So I have this css code:

    width: 48%;
    max-width: 500px;
    position: relative;
    padding: 30px;
    margin-top: 20px;
    margin-left: 50px;
    margin-right: 50px;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
    transform: translateY(-10px);
    transition: transform 0.55s ease;
    background-color: #ffffff;
}
  
.box:hover, .box1:hover {
    transform: translateY(-20px);
}

And this JS code using ScrollReveal libary:

sr1.reveal('.data-section .container .data .box', {delay: 150, origin: 'left'});
sr1.reveal('.data-section .container .data .box1', {delay: 150, origin: 'right'});

The JS code prevent the css from giving a hover animation, how do I fix this? Because I have another same element with hover animation combined with scrollreveal and it works just fine