Skip to main content

Brighten up your website with these animations

Pure CSS Animals

These cute icons come to life when you hover over them

To create impressive website visuals and animations you don't have to use photo editing software (opens in new tab) that will drag down your load speed. Instead you can create amazing CSS animation (opens in new tab) entirely using markup – and that's exactly what Pankaj Taneja has done with these adorable animated animals.

Pure CSS Animals (opens in new tab) is a collection of animated animals, people and icons all made entirely out of, you guessed it, CSS. Originally created as a way of testing the capabilities of HTML and CSS, Taneja has now uploaded some of the designs to Codepen (opens in new tab) for users to download and examine for free.

Supported by all modern browsers, these stylish animations are fully responsive across desktop, mobile and tablets, with each one bursting into life when you hover over them. As well as looking good on websites, they're a great way for designers to see how CSS animations work.

Pure CSS Animals

This caped crusader isn't all he seems...
(opens in new tab)

Pure CSS Animals

Float along with this relaxing frog and lily pad
(opens in new tab)

Pure CSS Animals

This laid-back hipster stolls along the screen
(opens in new tab)

Pure CSS Animals

There she blows! We love this whale animation
(opens in new tab)

Liked this? Read these!

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Dom Carter is a freelance writer who specialises in art and design. Formerly a staff writer for Creative Bloq, his work has also appeared on Creative Boom and in the pages of ImagineFX, Computer Arts, 3D World, and .net. He has been a D&AD New Blood judge, and has a particular interest in picture books.