/* (A) FORCE ALL ITEMS INTO SINGLE ROW */
.hmove {
display: flex;
white-space: nowrap;
}
.hitem {
width: 100%;
flex-shrink: 0;
font-size: 21px;
font-family: Verdana, sans-serif;
}
.hwrap {
overflow: hidden;
padding-bottom: 15px;
}
/* (B) MOVE ITEMS FROM RIGHT TO LEFT */
/* first item = 0, fourth item = -300% */
@keyframes tickerh {
0% {
transform: translatex(100%);
}
100% {
transform: translatex(-75%);
}
}
.hmove {
animation: tickerh linear 20s infinite;
}
.hmove:hover {
animation-play-state: paused;
}
@media only screen and (min-width: 200px) and (max-width: 600px) {
.hmove {
animation: tickerh linear 30s infinite;
}
}
@media only screen and (min-width: 601px) and (max-width: 1000px) {
.hmove {
animation: tickerh linear 30s infinite;
}
}
.hidden {
display: none !important;
} |