Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS - Beyond the Basics CSS Animation Basics Full-Page Animation Project: Part 3

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
216,121 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.