THE HOUSE OF ALL EQUESTRIANS

.marquee { height: 250px; width: 100%; justify-content: space-around; align-items: center; overflow: hidden; position: relative; } .marquee div{ justify-content: space-around !important; } @media screen and (min-width: 768px) { /* would need to be adjusted depending on time */ .marquee .marqueeone{ animation: marquee 20s linear infinite } .marquee .marqueetwo{ animation: marquee 20s linear 5s infinite } .marquee .marqueethree{ animation: marquee 20s linear 10s infinite } .marquee .marqueefour{ animation: marquee 20s linear 15s infinite } /* even out the elements */ .marquee div { position: absolute; width: 100%; left: 100%; height: auto; display: flex; justify-content: space-between; } .marquee:hover div { animation-play-state: paused; } } /* mobile */ @media screen and (max-width: 768px) { /* would need to be adjusted depending on time */ .marquee .marqueeone{ animation: marquee 20s linear infinite } .marquee .marqueetwo{ animation: marquee 20s linear 10s infinite } .marquee .marqueethree{ animation: marquee 20s linear 10s infinite } .marquee .marqueefour{ animation: marquee 20s linear 15s infinite } /* even out the elements */ .marquee div { position: absolute; width: 100%; left: 100%; height: auto; display: flex; justify-content: space-between; } @keyframes marquee { 0% { left: 100%; } 50% { left: -100%; } 100% {left: -100%} } } } /* add delay at the end of animation so you dont start while another div is going */ @keyframes marquee { 0% { left: 100%; } 50% { left: -100%; } 100% {left: -100%} }