/* WRAPPER */
.tickerv-wrap {
background: #eee;
box-sizing: content-box;
height: 25px; /* Take note of this */
overflow: hidden; /* Hide scrollbars */
padding: 10px;
}
/* TICKER ANIMATION */
@keyframes tickerv {
0% {margin-top: 0;}
/* Quite literally -ve height of wrapper */
25% {margin-top: -26px;} /* 1 X 25 px */
50% {margin-top: -52px;} /* 2 X 25 px */
75% {margin-top: -78px;} /* 3 X 25 px */
100% {margin-top: 0;} /* Back to first line */
}
.tickerv-wrap ul {
padding: 0;
margin: 0;
list-style-type: none;
animation-name: tickerv; /* Loop through items */
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(1, 0, .5, 0);
}
.tickerv-wrap ul:hover {
/* Pause on mouse hover */
animation-play-state: paused;
}
/* ITEMS */
.tickerv-wrap ul li {
font-size: 18px;
line-height: 26px /* Same as wrapper height */
}