back

404 animation

View

Description

I made a web animation using CSS3 to show on the 404 page of this website. Because of the name of this website, I made an elephant that's eating the web page.

The hardest part was having the elephant's mouth chew. For this I experimented with sprites, but eventually I settled on using an animated gif for the mouth. All other moving parts (the trunk and ears) are animated using CSS keyframes.

Process

I doodled many, many elephants before I decided which design to animate.

sketches of elephants sketches of elephants sketches of elephants sketches of elephants sketches of elephants
image of the roelifant logo, as wel as a sketch showing the skeleton of circles and lines that the logo was made of