CSS animations are awesome!

Yet another not-so-new-tech to talk about; CSS keyframe animations. Browser support is just about good enough to use these for things on actual websites now, they’ve been around for a long time but as usual IE is the sticking point with only version 10 and above offering support.

A quick intro

CSS Tricks has some awesome stuff on animations; check out this post for a full syntax reference and this one for some clever stuff you can do. The general gist of it is that you can define various CSS properties at certain points in an animation, then have an element follow that animation in a given time. There is obviously a lot of other things that can be changed but the basics of it are reasonably straight forward.

Transition Vs. Animation

The transition property is closely related to animations, you can generally think of transitions as an animation that only has two states and happens on an event such as hover. Like this

See the Pen CSS Transition Demo by Jacek (@betterphp) on CodePen.

An animation can also happen on an event if you want it to, it can also have a much more complex path and run forever. Like this

See the Pen CSS Animation Demo by Jacek (@betterphp) on CodePen.

Getting Fancy

There are some stupidly cool things that can be done with relative ease with keyframe animations. I’d recommend browsing on CodePen but here are a few things I came up with.

CSS Rain

Not too useful, pretty though

See the Pen CSS Rain Animation by Jacek (@betterphp) on CodePen.

Concentric Rotating Circles

Also not too useful, maybe as a loading animation

See the Pen CSS Spinning Thing by Jacek (@betterphp) on CodePen.

Pong!

This one is completely useless, nice demo of a more complex animation though

See the Pen Pong! by Jacek (@betterphp) on CodePen.