View Demo

#dailycssimages – Day 3

CSS Images

It’s day 3 of the #dailycssimages challenge and it’s time to bring out the animations!

Today’s prompt was beaver which confused me for ages because I kept thinking of gophers. No idea why.

#dailycssimages - Day 3 - Beaver

View Demo    View on GitHub

I thought I’d have a go at playing with perspective this time as the first two days I created head-on illustrations, so today I created a slightly angled beaver, popping his head out of the water.

I’ve seen so many great CSS images in the past few days that use animations, and it just makes them so much more impressive, so I thought I’d have a go at building my first ever CSS animation.

Animate.css has always been my friend in the past, so I have used animations before, but I’ve never used keyframes to build my own. Whilst this animation is simple – just changing the ‘height’ and ‘top’ properties of the beaver’s body – I can see how versatile and complicated animations can be.

You can click the buttons above to see the demo, or checkout the code on CodePen below.

See the Pen #dailycssimages – Day 3 by Laura (@lrobson555) on CodePen.