So I have implemented a CSS3 transition to scroll a wide image across the screen using this code
animation-name:scrolling;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
@keyframes scrolling
{
0% { background-position: 0% 0%; }
100% { background-position: -2000px 0%; }
}
Works fine, but after 20 seconds it jumps back to the beginning, does any one have any idea how I can continually scroll it without jumping back to beginning after 20s. If I adjusted duration this would just slow down scrolling and then jump after the duration.
Also do you know how I can pause the animation on with the hover event?
Thanks