Solution: Adding keyframes to our animation


show more Solution: Adding keyframes to our animation provides you with in-depth training on Web. Taught by Val Head as part of the CSS: Animations (2013) show less
please wait ...

Solution: Adding keyframes to our animation

So let's take a look what I came up with for this challenge. I have our unicycle rider going back and forth a little bit at the start, then going off to the right, and going back and forth a little bit and then completing his routine. So, let's hop over to the CSS to see how I created this. I made some adjustment to our rider animation and added a few more keyframes. I started out with our 0% keyframe of translating nothing, so he starts out in his original position. Then at 20% I moved our unicycle rider over just a bit to the right, at 35% a little ways back to the left, and then at 85% I moved him pretty much the entire way over to the right.

And at 100% I moved him ever so slightly over to the left. So that's how I got that kind of back and forth motion. And these percentages are numbers I just kind of came up with based on what looked right. There's no real science or math behind them. It was just some adjustments here and there to get a good look for the animation. And in our ...

Solution: Adding keyframes to our animation
Video duration: 1m 13s 1h 56m Intermediate

Viewers:

Solution: Adding keyframes to our animation provides you with in-depth training on Web. Taught by Val Head as part of the CSS: Animations (2013)

Subject:
Web
Software:
CSS
Author:
please wait ...