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 CSS - Beyond the Basics CSS Animation Basics Full-Page Animation Project: Part 3

Rifqi Fahmi
Rifqi Fahmi
23,164 Points
Posted by Rifqi Fahmi
Rifqi Fahmi
23,164 Points

How to animate continuously without that tricky jump cut ?

In this video the teacher show us the animation run once. If we set the animation iteration to infinite it will have some sort of jump cut when the animation start again from the first keyframe. I want to know how to animate it linearly without jump cut effect . How to make the last keyframe to be the first keyframe when it start to animate again ? are we have to precisely set the keyframe for background position so the start and the end match ? Guil Hernandez

Thanks :)

1 Answer

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

You're close.

But for a smooth, linear repeat you don't want to end on the same position that you start, you want to end one single frame before the start position. It's a bit tricky to be precise with the positions set in percentages, but try changing the final background X position from -360% to -393%.

And it doesn't have to be linear, you can have the tug pause and move again just by changing the speed curve to something that starts and ends gently, like ease-in-out.