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 Animating SVG with CSS Keyframe and Line Drawing Animations Creating an SVG Animation Sequence

Marc McDougall
Marc McDougall
6,052 Points

What's the difference between @keyframes and bezier curve time interpolation?

It seems that we're using @keyframes to define where a particular animation should be at a particular time. Isn't this the purpose of the timing function?

For example, if I want an animation to be halfway scaled between 1 and 2 at 50% of the animation duration, then I'll just use an interpolator that hits on that value in it's curve. Does that make sense?

It seems that adding a timing function on top of keyframe animations that have already been established is going to complicated things.

1 Answer

Steven Parker
Steven Parker
220,450 Points

:point_right: The timing functions can provide sophisticated effects without much code.

Your own example can be accomplished with a single keyframe. But timing functions can add interesting smoothing or even bouncing effects without additional keyframes.

Certainly, you could get the same effects with carefully calculated keyframe settings, but the code would be a lot larger. And if you combined that with timing functions it could be very complicated indeed! Hopefully no one would do such a thing! :anguished:

Marc McDougall
Marc McDougall
6,052 Points

Okay, that makes more sense thanks Steven, though I'm still not sure why we used both a timing function and keyframes in this example.

Also, does the timing function interpolate between individual keyframes or the entire animation from 0% to 100%?