Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Unused CSS Stages CSS Animations Full-Page Animation Project: Part 2

Atila Nadj
Atila Nadj
2,629 Points
Posted by Atila Nadj
Atila Nadj
2,629 Points

Smooth background image animation

Hi, I was wondering how can I/we achieve smooth continuous background-image animation.

With 'infinite' key word used we can see that when it reaches the end it jumps back to the first key frame (100%).

Is there a way to remove this behavior? I wan to have continuous animation but without the jumping effect.

1 Answer

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Depends on what you are animating. But basically, to make it smooth, the starting and ending point has to be the same so you don't get the jumping effect. Basically the first 50% of your animation should be going from the beginning to the end, and the second 50% of the animation should be going back to the beginning value(s).

Than, the infinite timing should be nice and smooth.

Super simplistic Codepen, but it visually shows you what I mean. http://codepen.io/kevink/pen/ogGWeE