Animating some object on browser screen is fun task. This tutorial demonstrate 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 animation 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 are 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 on 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

body{
	width:100%;
	overflow:hidden;
}

.bee{
	margin-top:100px;
	position:relative;
	animation: ani-bee 10s ease infinite;
	transform-origin: 0% 0%;
}

.bee-wing-left,.bee-wing-right,.bee-body{
	position:absolute;
}

.bee-wing-left{
	top:20px;
	left:-5px;
	transform-origin: 50% 0%;
	animation: ani-left-wing 1s ease infinite;
}

.bee-wing-right{
	top:20px;
	left:15px;
	transform-origin: 50% 0%;
	animation: ani-right-wing 1s ease infinite;
}

@keyframes ani-left-wing {
 0% {transform: rotate(10deg);}
 90% {transform: rotate(0deg);}
 100% {transform: rotate(10deg);}
}

@keyframes ani-right-wing {
 0% {transform: rotate(-10deg);}
 90% {transform: rotate(0deg);}
 100% {transform: rotate(-10deg);}
}

@keyframes ani-bee {
	0%{ left:50px;transform: rotate(30deg);}
	50% {left:300px;transform: rotate(-360deg);}
	100% {left:50px;transform: rotate(30deg);}
}