Animating some object on browser screen is a fun task. This tutorial demonstrates how to do CSS bee animation on user browser screen.

For bee animation, I basically used three images, the bee body, and two wings.

All animations are applied from css3 animation property including left and right wing rotation and movement.

DemoDownload

Basic idea behind Bee Animation

The step by step HTML element placement and styling as follow.

Inside <div> element there are three images, the bee body, left wing and right wing. The position property of all three images is set to absolute.

The left wing and right wing’s top and left properties are altered to make them appear on top of bee body image. Now, the combined all images look like a bee with wings on top.

Both wings rotation point is set to top middle corner of the images and animation is applied to rotation property to give wings a movement.

Finally, the whole bee body is given a movement with rotation.

The HTML and CSS code for bee animation as follow.

HTML

< div class = "bee" > < img src = "images/beebody.png" class = "bee-body" /> < img src = "images/beewing-left.png" class = "bee-wing-left" /> < img src = "images/beewing-right.png" class = "bee-wing-right" /> </ div >

CSS