So I put togehter this little comparison where I create the same animation with different animation techniques. It's not comprehensive in any way, it's just for my own curiosity. Since the Pens belong together I thought a blog post was a good choice - much more fun than just a CodePen Collection.
CSS keyframe animation
Except for canvas, the only technique I already knew was CSS keyframe animation. By animating X and Y movement on a parent and a child element respectively, you can combine two different CSS animations.
The bouncing is achieved by using animation-timing-function
linear for X and
ease-in for Y.
You call the animate() method on the HTML element you want to animate. Cool!
SVG Animation (SMIL)
W0T!? There are more ways to animate stuff?
I think there is a future in SVG because of the big variation in screensizes. Make it look good once and then make sure it scales properly is a nice solution. But for me personally, this technique feels the most awkward.
There is no "alternate" keywork to make the animation go back and forth, you have to manually set the starting point at the top, 50% at the bottom and then at 100% at the top again. And there is no easing keywords, you have to manually set easings with bezier curves (via
All in all I had a great time experimenting with all this.
I found these two CSS Tricks articles increadibly useful: