Flash like animation: Butterfly

The animation is completely developed using CSS3 code and no graphical image is used in this animation.

-No JavaScript
-No HTML5
-No Flash
Pure CSS (CSS3)

=
=
=
=

=
=
=
=

---

Code of the Snippet

Paste this inside header part or your CSS style sheet

<style type="text/css">
/*****************************/
.part_one
{
text-align:center;
color:#ffffff;
background: #33FF00;
border-right:#0000CC solid;
border-bottom:#0000CC solid;

border-top:#0000CC solid;
position:absolute;
width:30px;
height:200px;
left:280px;
top:220px;
border-radius:0px 100px 100px 0px;
-moz-border-radius:0px 100px 100px 0px; /* Firefox 3.6 and earlier */
}
.part_two
{
text-align:center;
color:#ffffff;
background: #33FF00;
border-left:#0000CC solid;
border-bottom:#0000CC solid;
border-top:#0000CC solid;
width:30px;
position:absolute;
left:250px;
top:220px;
height:200px;
border-radius:100px 0px 0px 100px;
-moz-border-radius:100px 0px 0px 100px; /* Firefox 3.6 and earlier */
}
.left_wing_one{
border:solid #0000CC;
border-radius:100px 30px;
background:#FFFF00;
position:absolute;
width:130px;
height:170px;
left:306px;
top:170px;
}
.right_wing_one{
border:solid #0000CC;
border-radius:30px 100px;
background:#FFFF00;
position:absolute;
width:130px;
height:170px;
left:120px;
top:170px;
}

.left_wing_two{
border:solid #0000CC;
border-radius:30px 50px;
background:#FF0000;
position:absolute;
width:90px;
height:100px;
left:303px;
top:320px;
}


.right_wing_two{
border:solid #0000CC;
border-radius:50px 30px;
background:#FF0000;
position:absolute;
width:90px;
height:100px;
left:163px;
top:320px;
}

.left_wing_one ,.left_wing_two {
animation: animation_3 1s linear 0s infinite alternate;
/* Firefox: */
-moz-animation: animation_3 1s linear 0s infinite alternate;
/* Safari and Chrome: */
-webkit-animation: animation_3 1s linear 0s infinite alternate;
}

.right_wing_one,.right_wing_two {
animation: animation_4 1s linear 0s infinite alternate;
/* Firefox: */
-moz-animation: animation_4 1s linear 0s infinite alternate;
/* Safari and Chrome: */
-webkit-animation: animation_4 1s linear 0s infinite alternate;
}

.circle_1{
background:#FFFFFF;
border:#000000 solid;
width:10px;
height:10px;
border-radius:10px;
position:absolute;
left:257px;
top:245px;
}
.circle_2{
background:#FFFFFF;
border:#000000 solid;
width:10px;
height:10px;
border-radius:10px;
position:absolute;
left:287px;
top:245px;
}
.circle_3{
background:#CC66CC;
border:#000000 solid;
width:30px;
height:30px;
border-radius:30px;
position:absolute;
left:150px;
top:220px;
}
.circle_4{
background:#CC66CC;
border:#000000 solid;
width:30px;
height:30px;
border-radius:30px;
position:absolute;
left:370px;
top:220px;
}
.antena_1{
background: #FFFFFF;
border-left:#000000 solid;
border-top:#000000 solid;
border-radius:50px 20px;
width:50px;
height:100px;
position:absolute;
left:285px;
top:180px;


animation: animation_1 1s linear 0s infinite alternate;
/* Firefox: */
-moz-animation: animation_1 1s linear 0s infinite alternate;
/* Safari and Chrome: */
-webkit-animation: animation_1 1s linear 0s infinite alternate;

}
.antena_2{
background: #FFFFFF;
border-right:#000000 solid;
border-top:#000000 solid;
border-radius:20px 50px;
width:50px;
height:100px;
position:absolute;
left:222px;
top:180px;



animation: animation_2 1s linear 0s infinite alternate;
/* Firefox: */
-moz-animation: animation_2 1s linear 0s infinite alternate;
/* Safari and Chrome: */
-webkit-animation: animation_2 1s linear 0s infinite alternate;

}

@keyframes animation_1
{
from {transform: rotate(0deg);}
to {transform: rotate(30deg);}
}

@-moz-keyframes animation_1 /* Firefox */
{
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(30deg);}
}

@-webkit-keyframes animation_1 /* Safari and Chrome */
{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(30deg);}
}



@keyframes animation_2
{
from {transform: rotate(0deg);}
to {transform: rotate(20deg);}
}

@-moz-keyframes animation_2 /* Firefox */
{
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(20deg);}
}

@-webkit-keyframes animation_2 /* Safari and Chrome */
{

from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(20deg);}
}


@keyframes animation_3
{
from {transform:skew(0deg,0deg);}
to {transform:skew(0deg,10deg);}
}

@-moz-keyframes animation_3 /* Firefox */
{
from {-moz-transform: skew(0deg,0deg);}
to {-moz-transform: skew(0deg,10deg);}
}

@-webkit-keyframes animation_3 /* Safari and Chrome */
{
from {-webkit-transform: skew(0deg,0deg);}
to {-webkit-transform: skew(0deg,10deg);}
}


@keyframes animation_4
{
from {transform:skew(0deg,0deg);}
to {transform:skew(0deg,-10deg);}
}

@-moz-keyframes animation_4 /* Firefox */
{
from {-moz-transform: skew(0deg,0deg);}
to {-moz-transform: skew(0deg,-10deg);}
}

@-webkit-keyframes animation_4 /* Safari and Chrome */
{
from {-webkit-transform: skew(0deg,0deg);}
to {-webkit-transform: skew(0deg,-10deg);}
}

div#margin {

margin-bottom:350px;

}

/****************************/
</style>

Paste the below code in the page where you want to create item

<div id="margin">
<div class="antena_1">
</div>
<div class="antena_2">
</div>
<div class="part_one">
<br />
<br />
<br />
<br />
=<br />
=<br />
=<br />
=</div>
<div class="part_two">
<br />
<br />
<br />
<br />
=<br />
=<br />
=<br />
=</div>
<div class="left_wing_one">
</div>
<div class="right_wing_one">
</div>
<div class="right_wing_two">
</div>
<div class="left_wing_two">
</div>
<div class="circle_1">
</div>
<div class="circle_2">
</div>
<div class="circle_3">
</div>
<div class="circle_4">
</div>
</div>
</div>