.butterfly { 
	width: 1000px; 
	height: 178px; 
	margin: 0 auto; 
	overflow: hidden;
	position:absolute;
	z-index:999;
	top: 0px;
}
.butter1, .butter2, .butter3 {
    position: relative;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    display: none\9; *display: none;
}
.butter1 { -webkit-animation-name: butter1; -webkit-animation-duration: 30s; -webkit-transform: rotateZ(-30deg); }
.butter2 { -webkit-animation-name: butter2; -webkit-animation-duration: 40s; -webkit-transform: rotateZ(-30deg); }
.butter3 { -webkit-animation-name: butter3; -webkit-animation-duration: 50s; -webkit-transform: rotateZ(30deg); }
.butterfly1, .butterfly2, .butterfly3 {
    position: absolute;
    -webkit-animation-name: x-spin;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-linear;
}
.butterfly1 { height: 36px; left: 40px; bottom: 60px; -webkit-animation-duration: 0.4s; }
.butterfly2 { height: 40px; left: 80px; bottom: 10px; -webkit-animation-duration: 0.4s; }
.butterfly3 { height: 40px; right: 60px; bottom: 30px; -webkit-animation-duration: 0.32s; }

@-webkit-keyframes x-spin {
    0%        { -webkit-transform: rotateX(0deg); }
    20%        { -webkit-transform: rotateX(80deg); }
    40%        { -webkit-transform: rotateX(130deg); }
    50%        { -webkit-transform: rotateX(180deg); }
    60%        { -webkit-transform: rotateX(210deg); }
    80%        { -webkit-transform: rotateX(270deg); }
    100%    { -webkit-transform: rotateX(360deg); }
}
@-webkit-keyframes butter1 {
    0%        { opacity: 0; }
    10%        { left: 160px; bottom: 10px; opacity: 1; }
    20%        { left: 240px; bottom: 45px; }
    30%        { left: 400px; bottom: 15px; }
    60%        { left: 720px; bottom: -5px; }
    70%        { left: 800px; bottom: 30px; }
    80%        { left: 840px; bottom: 0px; opacity: 0.6; }
    100%    { left: 900px; bottom: 140px; opacity: 0; }
}
@-webkit-keyframes butter2 {
    0%        { opacity: 0; }
    10%        { left: 120px; bottom: 20px; opacity: 1; }
    40%        { left: 180px; bottom: 20px; }
    50%        { left: 360px; bottom: 0px; }
    60%        { left: 600px; bottom: 10px; }
    80%        { left: 640px; bottom: 20px; opacity: 0.6; }
    100%    { left: 860px; bottom: 30px; opacity: 0; }
}
@-webkit-keyframes butter3 {
    0%        { opacity: 0; }
    10%        { right: 160px; bottom: 30px; opacity: 1; }
    20%        { right: 200px; bottom: 40px; }
    40%        { right: 400px; bottom: 0px; }
    60%        { right: 620px; bottom: 20px; }
    70%        { right: 700px; bottom: 50px; opacity: 0.6; }
    100%    { right: 840px; bottom: 160px; opacity: 0; }
}