Animations and transforms

Every employee at ITQ has their own little mini-me in the form of a little character based on your appearance. Here is mine:

So I have this image sitting in a folder on my Ondrive for whenever I might need it. Queue a boring evening with not much else to do, I figured, lets animate some life into the little guy using CSS. Here is the result.

See the Pen Animated MiniMe by Sander Harrewijnen (@Harrewarre) on CodePen.

Use the tabs on the embedded code pen to take a peek under the hood. The animations use transforms to manipulate the div that contains the image. By using percentages instead of just from and to for the animation states we can take a lot more control over the flow of the animation.