jammmie999 0 Newbie Poster

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.