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
Marc McDougall
6,052 PointsWhat'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
231,248 Points
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!
Marc McDougall
6,052 PointsMarc McDougall
6,052 PointsOkay, 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%?