Infinite Marquee using @keyframes CSS

You will need an element with a class .marquee to have this infinite marquee work. You will also need two instances of the same wrapper holding your content within the .marquee. Once you've all the content in place, take the transform value and play with it until you find the right value that's not being buggy.


<style>
.marquee{animation: infinite-marquee linear 30s infinite;}
    @keyframes infinite-marquee{
    from{transform:translateX(0%);}
    to{transform:translateX(-181.9%);}
    }
    
  .marquee:hover{-webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
    }
</style>