Butterfly css\\

In this example below you will see how to do a Butterfly css\\ with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by navupawar, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright navupawar ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Butterfly css\</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta property="wb:webmaster" content="edcf77ed05a8765f" />
  <title>SaaS Testing </title>
  <link href="favicon.ico" rel="icon" />
</head>

<body>
  <div id="wrapper">
    <!-- css3 flower -->
    <div class="flower flower_1"></div>
    <div class="flower flower_2"></div>
    <div class="flower flower_3"></div>
    <div class="flower flower_4"></div>
    <div class="flower flower_5"></div>
    <!-- css3 butterfly -->
    <div class="butterfly1">
      <div class="butterfly1_left"></div>
      <div class="butterfly1_body"></div>
      <div class="butterfly1_right"></div>
    </div>
    <div class="butterfly2">
      <div class="butterfly2_left"></div>
      <div class="butterfly2_body"></div>
      <div class="butterfly2_right"></div>
    </div>
    <div class="butterfly3">
      <div class="butterfly3_left"></div>
      <div class="butterfly3_body"></div>
      <div class="butterfly3_right"></div>
    </div>
    <div class="butterfly4">
      <div class="butterfly4_left"></div>
      <div class="butterfly4_body"></div>
      <div class="butterfly4_right"></div>
    </div>
  </div>
</body>

</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/navupawar/butterfly-css-NvwJeL */
/**************  flower scale animation  *****************/
@keyframes scale_2x {
  0% {
    transform: scale(1, 1); }
  100% {
    transform: scale(1.15, 1.15); } }
@-moz-keyframes scale_2x {
  0% {
    -moz-transform: scale(1, 1); }
  100% {
    -moz-transform: scale(1.15, 1.15); } }
@-o-keyframes scale_2x {
  0% {
    -o-transform: scale(1, 1); }
  100% {
    -o-transform: scale(1.15, 1.15); } }
@-webkit-keyframes scale_2x {
  0% {
    -webkit-transform: scale(1, 1); }
  100% {
    -webkit-transform: scale(1.15, 1.15); } }
/* scale_1x animation css3 */
@keyframes scale_1x {
  0% {
    transform: scale(1, 1); }
  100% {
    transform: scale(1.1, 1.1); } }
@-moz-keyframes scale_1x {
  0% {
    -moz-transform: scale(1, 1); }
  100% {
    -moz-transform: scale(1.1, 1.1); } }
@-o-keyframes scale_1x {
  0% {
    -o-transform: scale(1, 1); }
  100% {
    -o-transform: scale(1.1, 1.1); } }
@-ms-keyframes scale_1x {
  0% {
    -ms-transform: scale(1, 1); }
  100% {
    -ms-transform: scale(1.1, 1.1); } }
@-webkit-keyframes scale_1x {
  0% {
    -webkit-transform: scale(1, 1); }
  100% {
    -webkit-transform: scale(1.1, 1.1); } }
/*****  butterfly css3 animations  *****/
/*****
 butterfly_1
******/
/**************  flight_1 animation  *****************/
@keyframes flight_1 {
  0% {
    transform: translate(0);
    backface-visibility: hidden; }
  15% {
    transform: translate(85px, 178px);
    backface-visibility: hidden; }
  25% {
    transform: translate(89px, 182px);
    backface-visibility: hidden; }
  35% {
    transform: translate(86px, 178px);
    backface-visibility: hidden; }
  50% {
    transform: translate(110px, -125px);
    backface-visibility: hidden; }
  70% {
    transform: translate(114px, -127px);
    backface-visibility: hidden; }
  85% {
    transform: translate(111px, -125px);
    backface-visibility: hidden; }
  100% {
    transform: translate(0); } }
@-moz-keyframes flight_1 {
  0% {
    -moz-transform: translate(0);
    -moz-backface-visibility: hidden; }
  15% {
    -moz-transform: translate(85px, 178px);
    -moz-backface-visibility: hidden; }
  25% {
    -moz-transform: translate(89px, 182px);
    -moz-backface-visibility: hidden; }
  35% {
    -moz-transform: translate(86px, 178px);
    -moz-backface-visibility: hidden; }
  50% {
    -moz-transform: translate(110px, -125px);
    -moz-backface-visibility: hidden; }
  70% {
    -moz-transform: translate(114px, -127px);
    -moz-backface-visibility: hidden; }
  85% {
    -moz-transform: translate(111px, -125px);
    -moz-backface-visibility: hidden; }
  100% {
    -moz-transform: translate(0); } }
@-webkit-keyframes flight_1 {
  0% {
    -webkit-transform: translate(0);
    -webkit-backface-visibility: hidden; }
  15% {
    -webkit-transform: translate(85px, 178px);
    -webkit-backface-visibility: hidden; }
  25% {
    -webkit-transform: translate(89px, 182px);
    -webkit-backface-visibility: hidden; }
  35% {
    -webkit-transform: translate(86px, 178px);
    -webkit-backface-visibility: hidden; }
  50% {
    -webkit-transform: translate(110px, -125px);
    -webkit-backface-visibility: hidden; }
  70% {
    -webkit-transform: translate(114px, -127px);
    -webkit-backface-visibility: hidden; }
  85% {
    -webkit-transform: translate(111px, -125px);
    -webkit-backface-visibility: hidden; }
  100% {
    -webkit-transform: translate(0); } }
@-o-keyframes flight_1 {
  0% {
    -o-transform: translate(0);
    -o-backface-visibility: hidden; }
  15% {
    -o-transform: translate(85px, 178px);
    -o-backface-visibility: hidden; }
  25% {
    -o-transform: translate(89px, 182px);
    -o-backface-visibility: hidden; }
  35% {
    -o-transform: translate(86px, 178px);
    -o-backface-visibility: hidden; }
  50% {
    -o-transform: translate(110px, -125px);
    -o-backface-visibility: hidden; }
  70% {
    -o-transform: translate(114px, -127px);
    -o-backface-visibility: hidden; }
  85% {
    -o-transform: translate(111px, -125px);
    -o-backface-visibility: hidden; }
  100% {
    -o-transform: translate(0); } }
/**************  fly1 wing_action animation  *****************/
@keyframes fly1_left {
  from {
    backface-visibility: hidden;
    transform: perspective(1200px) rotateY(0); }
  to {
    backface-visibility: hidden;
    transform: perspective(1200px) rotateY(-35deg); } }
@keyframes fly1_right {
  from {
    backface-visibility: hidden;
    transform: perspective(1200px) rotateY(-65deg) rotateX(15deg); }
  to {
    backface-visibility: hidden;
    transform: perspective(1200px) rotateY(-88deg) rotateX(15deg); } }
@-webkit-keyframes fly1_left {
  from {
    -webkit-backface-visibility: hidden;
    -webkit-transform: perspective(1200px) rotateY(0deg); }
  to {
    -webkit-backface-visibility: hidden;
    -webkit-transform: perspective(1200px) rotateY(-35deg); } }
@-webkit-keyframes fly1_right {
  from {
    -webkit-backface-visibility: hidden;
    -webkit-transform: perspective(1200px) rotateY(-65deg) rotateX(15deg); }
  to {
    -webkit-backface-visibility: hidden;
    -webkit-transform: perspective(1200px) rotateY(-88deg) rotateX(15deg); } }
@-moz-keyframes fly1_left {
  from {
    -moz-backface-visibility: hidden;
    -moz-transform: perspective(1200px) rotateY(0); }
  to {
    -moz-backface-visibility: hidden;
    -moz-transform: perspective(1200px) rotateY(-35deg); } }
@-moz-keyframes fly1_right {
  from {
    -moz-backface-visibility: hidden;
    -moz-transform: perspective(1200px) rotateY(-65deg) rotateX(15deg); }
  to {
    -moz-backface-visibility: hidden;
    -moz-transform: perspective(1200px) rotateY(-88deg) rotateX(15deg); } }
@-o-keyframes fly1_left {
  from {
    -o-backface-visibility: hidden;
    -o-transform: perspective(1200px) rotateY(0); }
  to {
    -o-backface-visibility: hidden;
    -o-transform: perspective(1200px) rotateY(-35deg); } }
@-o-keyframes fly1_right {
  from {
    -o-backface-visibility: hidden;
    -o-transform: perspective(1200px) rotateY(-65deg) rotateX(15deg); }
  to {
    -o-backface-visibility: hidden;
    -o-transform: perspective(1200px) rotateY(-88deg) rotateX(15deg); } }
/*******************************************************************************************************
 butterfly_3
********************************************************************************************************/
/**************  flight_3 animation  *****************/
@keyframes flight_3 {
  0% {
    transform: translate(0);
    backface-visibility: hidden; }
  20% {
    transform: translate(-120px, 90px);
    backface-visibility: hidden; }
  40% {
    transform: translate(-128px, 98px);
    backface-visibility: hidden; }
  60% {
    transform: translate(-203px, -216px);
    backface-visibility: hidden; }
  80% {
    transform: translate(-209px, -223px);
    backface-visibility: hidden; }
  100% {
    transform: translate(0); } }
@-moz-keyframes flight_3 {
  0% {
    -moz-transform: translate(0);
    -moz-backface-visibility: hidden; }
  20% {
    -moz-transform: translate(-120px, 90px);
    -moz-backface-visibility: hidden; }
  40% {
    -moz-transform: translate(-128px, 98px);
    -moz-backface-visibility: hidden; }
  60% {
    -moz-transform: translate(-203px, -216px);
    -moz-backface-visibility: hidden; }
  80% {
    -moz-transform: translate(-209px, -223px);
    -moz-backface-visibility: hidden; }
  100% {
    -moz-transform: translate(0); } }
@-webkit-keyframes flight_3 {
  0% {
    -webkit-transform: translate(0);
    -webkit-backface-visibility: hidden; }
  20% {
    -webkit-transform: translate(-120px, 90px);
    -webkit-backface-visibility: hidden; }
  40% {
    -webkit-transform: translate(-128px, 98px);
    -webkit-backface-visibility: hidden; }
  60% {
    -webkit-transform: translate(-203px, -216px);
    -webkit-backface-visibility: hidden; }
  80% {
    -webkit-transform: translate(-209px, -223px);
    -webkit-backface-visibility: hidden; }
  100% {
    -webkit-transform: translate(0); } }
@-o-keyframes flight_3 {
  0% {
    -o-transform: translate(0);
    -o-backface-visibility: hidden; }
  20% {
    -o-transform: translate(-120px, 90px);
    -o-backface-visibility: hidden; }
  40% {
    -o-transform: translate(-128px, 98px);
    -o-backface-visibility: hidden; }
  60% {
    -o-transform: translate(-203px, -216px);
    -o-backface-visibility: hidden; }
  80% {
    -o-transform: translate(-209px, -223px);
    -o-backface-visibility: hidden; }
  100% {
    -o-transform: translate(0); } }
/**************  fly3 wing_action animation  *****************/
@keyframes fly3_left {
  from {
    backface-visibility: hidden;
    transform: perspective(1200px) rotateY(-60deg) rotateX(-13deg); }
  to {
    backface-visibility: hidden;
    transform: perspective(1200px) rotateY(-88deg) rotateX(-13deg); } }
@keyframes fly3_right {
  from {
    backface-visibility: hidden;
    transform: perspective(1200px) rotateY(0); }
  to {
    backface-visibility: hidden;
    transform: perspective(1200px) rotateY(-35deg); } }
@-webkit-keyframes fly3_left {
  from {
    -webkit-backface-visibility: hidden;
    -webkit-transform: perspective(1200px) rotateY(-60deg) rotateX(-13deg); }
  to {
    -webkit-backface-visibility: hidden;
    -webkit-transform: perspective(1200px) rotateY(-88deg) rotateX(-13deg); } }
@-webkit-keyframes fly3_right {
  from {
    -webkit-backface-visibility: hidden;
    -webkit-transform: perspective(1200px) rotateY(0deg); }
  to {
    -webkit-backface-visibility: hidden;
    -webkit-transform: perspective(1200px) rotateY(-35deg); } }
@-moz-keyframes fly3_left {
  from {
    -moz-backface-visibility: hidden;
    -moz-transform: perspective(1200px) rotateY(-60deg) rotateX(-13deg); }
  to {
    -moz-backface-visibility: hidden;
    -moz-transform: perspective(1200px) rotateY(-88deg) rotateX(-13deg); } }
@-moz-keyframes fly3_right {
  from {
    -moz-backface-visibility: hidden;
    -moz-transform: perspective(1200px) rotateY(0); }
  to {
    -moz-backface-visibility: hidden;
    -moz-transform: perspective(1200px) rotateY(-35deg); } }
@-o-keyframes fly3_left {
  from {
    -o-backface-visibility: hidden;
    -o-transform: perspective(1200px) rotateY(-60deg) rotateX(-13deg); }
  to {
    -o-backface-visibility: hidden;
    -o-transform: perspective(1200px) rotateY(-88deg) rotateX(-13deg); } }
@-o-keyframes fly3_right {
  from {
    -o-backface-visibility: hidden;
    -o-transform: perspective(1200px) rotateY(0); }
  to {
    -o-backface-visibility: hidden;
    -o-transform: perspective(1200px) rotateY(-35deg); } }
/*******************************************************************************************************
 butterfly_2
********************************************************************************************************/
/**************  flight_2 animation  *****************/
@keyframes flight_2 {
  0% {
    transform: translate(0);
    backface-visibility: hidden; }
  10% {
    transform: translate(0);
    backface-visibility: hidden; }
  20% {
    transform: translate(45px, 328px);
    backface-visibility: hidden; }
  30% {
    transform: translate(43px, 323px);
    backface-visibility: hidden; }
  35% {
    transform: translate(339px, 18px);
    backface-visibility: hidden; }
  50% {
    transform: translate(339px, 18px);
    backface-visibility: hidden; }
  70% {
    transform: translate(339px, 18px);
    backface-visibility: hidden; }
  85% {
    transform: translate(161px, 85px);
    backface-visibility: hidden; }
  100% {
    transform: translate(0); } }
@-moz-keyframes flight_2 {
  0% {
    -moz-transform: translate(0);
    -moz-backface-visibility: hidden; }
  10% {
    -moz-transform: translate(0);
    -moz-backface-visibility: hidden; }
  20% {
    -moz-transform: translate(45px, 328px);
    -moz-backface-visibility: hidden; }
  30% {
    -moz-transform: translate(43px, 323px);
    -moz-backface-visibility: hidden; }
  35% {
    -moz-transform: translate(339px, 18px);
    -moz-backface-visibility: hidden; }
  50% {
    -moz-transform: translate(339px, 18px);
    -moz-backface-visibility: hidden; }
  70% {
    -moz-transform: translate(339px, 18px);
    -moz-backface-visibility: hidden; }
  85% {
    -moz-transform: translate(161px, 85px);
    -moz-backface-visibility: hidden; }
  100% {
    -moz-transform: translate(0); } }
@-webkit-keyframes flight_2 {
  0% {
    -webkit-transform: translate(0);
    -webkit-backface-visibility: hidden; }
  10% {
    -webkit-transform: translate(0);
    -webkit-backface-visibility: hidden; }
  20% {
    -webkit-transform: translate(45px, 328px);
    -webkit-backface-visibility: hidden; }
  30% {
    -webkit-transform: translate(43px, 323px);
    -webkit-backface-visibility: hidden; }
  35% {
    -webkit-transform: translate(339px, 18px);
    -webkit-backface-visibility: hidden; }
  50% {
    -webkit-transform: translate(339px, 18px);
    -webkit-backface-visibility: hidden; }
  70% {
    -webkit-transform: translate(339px, 18px);
    -webkit-backface-visibility: hidden; }
  85% {
    -webkit-transform: translate(161px, 85px);
    -webkit-backface-visibility: hidden; }
  100% {
    -webkit-transform: translate(0); } }
@-o-keyframes flight_2 {
  0% {
    -o-transform: translate(0);
    -o-backface-visibility: hidden; }
  10% {
    -o-transform: translate(0);
    -o-backface-visibility: hidden; }
  20% {
    -o-transform: translate(45px, 328px);
    -o-backface-visibility: hidden; }
  30% {
    -o-transform: translate(43px, 323px);
    -o-backface-visibility: hidden; }
  35% {
    -o-transform: translate(339px, 18px);
    -o-backface-visibility: hidden; }
  50% {
    -o-transform: translate(339px, 18px);
    -o-backface-visibility: hidden; }
  70% {
    -o-transform: translate(339px, 18px);
    -o-backface-visibility: hidden; }
  85% {
    -o-transform: translate(161px, 85px);
    -o-backface-visibility: hidden; }
  100% {
    -o-transform: translate(0); } }
/**************  fly2 wing_action animation  *****************/
@keyframes fly2_left {
  from {
    backface-visibility: hidden;
    transform: perspective(1200px) rotateY(0); }
  to {
    backface-visibility: hidden;
    transform: perspective(1200px) rotateY(-75deg); } }
@keyframes fly2_right {
  from {
    backface-visibility: hidden;
    transform: perspective(1200px) rotateY(0); }
  to {
    backface-visibility: hidden;
    transform: perspective(1200px) rotateY(-75deg); } }
@-webkit-keyframes fly2_left {
  from {
    -webkit-backface-visibility: hidden;
    -webkit-transform: perspective(1200px) rotateY(0); }
  to {
    -webkit-backface-visibility: hidden;
    -webkit-transform: perspective(1200px) rotateY(75deg); } }
@-webkit-keyframes fly2_right {
  from {
    -webkit-backface-visibility: hidden;
    -webkit-transform: perspective(1200px) rotateY(0); }
  to {
    -webkit-backface-visibility: hidden;
    -webkit-transform: perspective(1200px) rotateY(-75deg); } }
@-moz-keyframes fly2_left {
  from {
    -moz-backface-visibility: hidden;
    -moz-transform: perspective(1200px) rotateY(0); }
  to {
    -moz-backface-visibility: hidden;
    -moz-transform: perspective(1200px) rotateY(-75deg); } }
@-moz-keyframes fly2_right {
  from {
    -moz-backface-visibility: hidden;
    -moz-transform: perspective(1200px) rotateY(0); }
  to {
    -moz-backface-visibility: hidden;
    -moz-transform: perspective(1200px) rotateY(-75deg); } }
@-o-keyframes fly2_left {
  from {
    -o-backface-visibility: hidden;
    -o-transform: perspective(1200px) rotateY(0); }
  to {
    -o-backface-visibility: hidden;
    -o-transform: perspective(1200px) rotateY(-75deg); } }
@-o-keyframes fly2_right {
  from {
    -o-backface-visibility: hidden;
    -o-transform: perspective(1200px) rotateY(0); }
  to {
    -o-backface-visibility: hidden;
    -o-transform: perspective(1200px) rotateY(-75deg); } }
/*******************************************************************************************************
 butterfly_4
********************************************************************************************************/
/**************  flight_4 animation  *****************/
@keyframes flight_4 {
  0% {
    transform: translate(0);
    backface-visibility: hidden; }
  15% {
    transform: translate(35px, 133px);
    backface-visibility: hidden; }
  25% {
    transform: translate(249px, 178px);
    backface-visibility: hidden; }
  35% {
    transform: translate(386px, 126px);
    backface-visibility: hidden; }
  50% {
    transform: translate(200px, 92px);
    backface-visibility: hidden; }
  70% {
    transform: translate(200px, 96px);
    backface-visibility: hidden; }
  85% {
    transform: translate(200px, 92px);
    backface-visibility: hidden; }
  100% {
    transform: translate(0); } }
@-moz-keyframes flight_4 {
  0% {
    -moz-transform: translate(0);
    -moz-backface-visibility: hidden; }
  15% {
    -moz-transform: translate(35px, 133px);
    -moz-backface-visibility: hidden; }
  25% {
    -moz-transform: translate(249px, 178px);
    -moz-backface-visibility: hidden; }
  35% {
    -moz-transform: translate(386px, 126px);
    -moz-backface-visibility: hidden; }
  50% {
    -moz-transform: translate(200px, 92px);
    -moz-backface-visibility: hidden; }
  70% {
    -moz-transform: translate(200px, 96px);
    -moz-backface-visibility: hidden; }
  85% {
    -moz-transform: translate(200px, 92px);
    -moz-backface-visibility: hidden; }
  100% {
    -moz-transform: translate(0); } }
@-webkit-keyframes flight_4 {
  0% {
    -webkit-transform: translate(0);
    -webkit-backface-visibility: hidden; }
  15% {
    -webkit-transform: translate(35px, 133px);
    -webkit-backface-visibility: hidden; }
  25% {
    -webkit-transform: translate(249px, 178px);
    -webkit-backface-visibility: hidden; }
  35% {
    -webkit-transform: translate(386px, 126px);
    -webkit-backface-visibility: hidden; }
  50% {
    -webkit-transform: translate(200px, 92px);
    -webkit-backface-visibility: hidden; }
  70% {
    -webkit-transform: translate(200px, 96px);
    -webkit-backface-visibility: hidden; }
  85% {
    -webkit-transform: translate(200px, 92px);
    -webkit-backface-visibility: hidden; }
  100% {
    -webkit-transform: translate(0); } }
@-o-keyframes flight_4 {
  0% {
    -o-transform: translate(0);
    -o-backface-visibility: hidden; }
  15% {
    -o-transform: translate(35px, 133px);
    -o-backface-visibility: hidden; }
  25% {
    -o-transform: translate(249px, 178px);
    -o-backface-visibility: hidden; }
  35% {
    -o-transform: translate(386px, 126px);
    -o-backface-visibility: hidden; }
  50% {
    -o-transform: translate(200px, 92px);
    -o-backface-visibility: hidden; }
  70% {
    -o-transform: translate(200px, 96px);
    -o-backface-visibility: hidden; }
  85% {
    -o-transform: translate(200px, 92px);
    -o-backface-visibility: hidden; }
  100% {
    -o-transform: translate(0); } }
/**************  fly4 wing_action animation  *****************/
@keyframes fly4_left {
  from {
    backface-visibility: hidden;
    transform: perspective(1200px) rotateY(0); }
  to {
    backface-visibility: hidden;
    transform: perspective(1200px) rotateY(-55deg); } }
@keyframes fly4_right {
  from {
    backface-visibility: hidden;
    transform: perspective(1200px) rotateY(0); }
  to {
    backface-visibility: hidden;
    transform: perspective(1200px) rotateY(55deg); } }
@-webkit-keyframes fly4_left {
  from {
    -webkit-backface-visibility: hidden;
    -webkit-transform: perspective(1200px) rotateY(0); }
  to {
    -webkit-backface-visibility: hidden;
    -webkit-transform: perspective(1200px) rotateY(-55deg); } }
@-webkit-keyframes fly4_right {
  from {
    -webkit-backface-visibility: hidden;
    -webkit-transform: perspective(1200px) rotateY(0); }
  to {
    -webkit-backface-visibility: hidden;
    -webkit-transform: perspective(1200px) rotateY(55deg); } }
@-moz-keyframes fly4_left {
  from {
    -moz-backface-visibility: hidden;
    -moz-transform: perspective(1200px) rotateY(0); }
  to {
    -moz-backface-visibility: hidden;
    -moz-transform: perspective(1200px) rotateY(-55deg); } }
@-moz-keyframes fly4_right {
  from {
    -moz-backface-visibility: hidden;
    -moz-transform: perspective(1200px) rotateY(0); }
  to {
    -moz-backface-visibility: hidden;
    -moz-transform: perspective(1200px) rotateY(-55deg); } }
@-o-keyframes fly4_left {
  from {
    -o-backface-visibility: hidden;
    -o-transform: perspective(1200px) rotateY(0); }
  to {
    -o-backface-visibility: hidden;
    -o-transform: perspective(1200px) rotateY(-55deg); } }
@-o-keyframes fly4_right {
  from {
    -o-backface-visibility: hidden;
    -o-transform: perspective(1200px) rotateY(0); }
  to {
    -o-backface-visibility: hidden;
    -o-transform: perspective(1200px) rotateY(-55deg); } }
/**************  flower scale animation  *****************/
@keyframes scale_2x {
  0% {
    transform: scale(1, 1); }
  100% {
    transform: scale(1.15, 1.15); } }
@-moz-keyframes scale_2x {
  0% {
    -moz-transform: scale(1, 1); }
  100% {
    -moz-transform: scale(1.15, 1.15); } }
@-o-keyframes scale_2x {
  0% {
    -o-transform: scale(1, 1); }
  100% {
    -o-transform: scale(1.15, 1.15); } }
@-webkit-keyframes scale_2x {
  0% {
    -webkit-transform: scale(1, 1); }
  100% {
    -webkit-transform: scale(1.15, 1.15); } }
/* scale_1x animation css3 */
@keyframes scale_1x {
  0% {
    transform: scale(1, 1); }
  100% {
    transform: scale(1.1, 1.1); } }
@-moz-keyframes scale_1x {
  0% {
    -moz-transform: scale(1, 1); }
  100% {
    -moz-transform: scale(1.1, 1.1); } }
@-o-keyframes scale_1x {
  0% {
    -o-transform: scale(1, 1); }
  100% {
    -o-transform: scale(1.1, 1.1); } }
@-ms-keyframes scale_1x {
  0% {
    -ms-transform: scale(1, 1); }
  100% {
    -ms-transform: scale(1.1, 1.1); } }
@-webkit-keyframes scale_1x {
  0% {
    -webkit-transform: scale(1, 1); }
  100% {
    -webkit-transform: scale(1.1, 1.1); } }
/*****  butterfly css3 animations  *****/
/*****
 butterfly_1
******/
/**************  flight_1 animation  *****************/
@keyframes flight_1 {
  0% {
    transform: translate(0);
    backface-visibility: hidden; }
  15% {
    transform: translate(85px, 178px);
    backface-visibility: hidden; }
  25% {
    transform: translate(89px, 182px);
    backface-visibility: hidden; }
  35% {
    transform: translate(86px, 178px);
    backface-visibility: hidden; }
  50% {
    transform: translate(110px, -125px);
    backface-visibility: hidden; }
  70% {
    transform: translate(114px, -127px);
    backface-visibility: hidden; }
  85% {
    transform: translate(111px, -125px);
    backface-visibility: hidden; }
  100% {
    transform: translate(0); } }
@-moz-keyframes flight_1 {
  0% {
    -moz-transform: translate(0);
    -moz-backface-visibility: hidden; }
  15% {
    -moz-transform: translate(85px, 178px);
    -moz-backface-visibility: hidden; }
  25% {
    -moz-transform: translate(89px, 182px);
    -moz-backface-visibility: hidden; }
  35% {
    -moz-transform: translate(86px, 178px);
    -moz-backface-visibility: hidden; }
  50% {
    -moz-transform: translate(110px, -125px);
    -moz-backface-visibility: hidden; }
  70% {
    -moz-transform: translate(114px, -127px);
    -moz-backface-visibility: hidden; }
  85% {
    -moz-transform: translate(111px, -125px);
    -moz-backface-visibility: hidden; }
  100% {
    -moz-transform: translate(0); } }
@-webkit-keyframes flight_1 {
  0% {
    -webkit-transform: translate(0);
    -webkit-backface-visibility: hidden; }
  15% {
    -webkit-transform: translate(85px, 178px);
    -webkit-backface-visibility: hidden; }
  25% {
    -webkit-transform: translate(89px, 182px);
    -webkit-backface-visibility: hidden; }
  35% {
    -webkit-transform: translate(86px, 178px);
    -webkit-backface-visibility: hidden; }
  50% {
    -webkit-transform: translate(110px, -125px);
    -webkit-backface-visibility: hidden; }
  70% {
    -webkit-transform: translate(114px, -127px);
    -webkit-backface-visibility: hidden; }
  85% {
    -webkit-transform: translate(111px, -125px);
    -webkit-backface-visibility: hidden; }
  100% {
    -webkit-transform: translate(0); } }
@-o-keyframes flight_1 {
  0% {
    -o-transform: translate(0);
    -o-backface-visibility: hidden; }
  15% {
    -o-transform: translate(85px, 178px);
    -o-backface-visibility: hidden; }
  25% {
    -o-transform: translate(89px, 182px);
    -o-backface-visibility: hidden; }
  35% {
    -o-transform: translate(86px, 178px);
    -o-backface-visibility: hidden; }
  50% {
    -o-transform: translate(110px, -125px);
    -o-backface-visibility: hidden; }
  70% {
    -o-transform: translate(114px, -127px);
    -o-backface-visibility: hidden; }
  85% {
    -o-transform: translate(111px, -125px);
    -o-backface-visibility: hidden; }
  100% {
    -o-transform: translate(0); } }
/**************  fly1 wing_action animation  *****************/
@keyframes fly1_left {
  from {
    backface-visibility: hidden;
    transform: perspective(1200px) rotateY(0); }
  to {
    backface-visibility: hidden;
    transform: perspective(1200px) rotateY(-35deg); } }
@keyframes fly1_right {
  from {
    backface-visibility: hidden;
    transform: perspective(1200px) rotateY(-65deg) rotateX(15deg); }
  to {
    backface-visibility: hidden;
    transform: perspective(1200px) rotateY(-88deg) rotateX(15deg); } }
@-webkit-keyframes fly1_left {
  from {
    -webkit-backface-visibility: hidden;
    -webkit-transform: perspective(1200px) rotateY(0deg); }
  to {
    -webkit-backface-visibility: hidden;
    -webkit-transform: perspective(1200px) rotateY(-35deg); } }
@-webkit-keyframes fly1_right {
  from {
    -webkit-backface-visibility: hidden;
    -webkit-transform: perspective(1200px) rotateY(-65deg) rotateX(15deg); }
  to {
    -webkit-backface-visibility: hidden;
    -webkit-transform: perspective(1200px) rotateY(-88deg) rotateX(15deg); } }
@-moz-keyframes fly1_left {
  from {
    -moz-backface-visibility: hidden;
    -moz-transform: perspective(1200px) rotateY(0); }
  to {
    -moz-backface-visibility: hidden;
    -moz-transform: perspective(1200px) rotateY(-35deg); } }
@-moz-keyframes fly1_right {
  from {
    -moz-backface-visibility: hidden;
    -moz-transform: perspective(1200px) rotateY(-65deg) rotateX(15deg); }
  to {
    -moz-backface-visibility: hidden;
    -moz-transform: perspective(1200px) rotateY(-88deg) rotateX(15deg); } }
@-o-keyframes fly1_left {
  from {
    -o-backface-visibility: hidden;
    -o-transform: perspective(1200px) rotateY(0); }
  to {
    -o-backface-visibility: hidden;
    -o-transform: perspective(1200px) rotateY(-35deg); } }
@-o-keyframes fly1_right {
  from {
    -o-backface-visibility: hidden;
    -o-transform: perspective(1200px) rotateY(-65deg) rotateX(15deg); }
  to {
    -o-backface-visibility: hidden;
    -o-transform: perspective(1200px) rotateY(-88deg) rotateX(15deg); } }
/*******************************************************************************************************
 butterfly_3
********************************************************************************************************/
/**************  flight_3 animation  *****************/
@keyframes flight_3 {
  0% {
    transform: translate(0);
    backface-visibility: hidden; }
  20% {
    transform: translate(-120px, 90px);
    backface-visibility: hidden; }
  40% {
    transform: translate(-128px, 98px);
    backface-visibility: hidden; }
  60% {
    transform: translate(-203px, -216px);
    backface-visibility: hidden; }
  80% {
    transform: translate(-209px, -223px);
    backface-visibility: hidden; }
  100% {
    transform: translate(0); } }
@-moz-keyframes flight_3 {
  0% {
    -moz-transform: translate(0);
    -moz-backface-visibility: hidden; }
  20% {
    -moz-transform: translate(-120px, 90px);
    -moz-backface-visibility: hidden; }
  40% {
    -moz-transform: translate(-128px, 98px);
    -moz-backface-visibility: hidden; }
  60% {
    -moz-transform: translate(-203px, -216px);
    -moz-backface-visibility: hidden; }
  80% {
    -moz-transform: translate(-209px, -223px);
    -moz-backface-visibility: hidden; }
  100% {
    -moz-transform: translate(0); } }
@-webkit-keyframes flight_3 {
  0% {
    -webkit-transform: translate(0);
    -webkit-backface-visibility: hidden; }
  20% {
    -webkit-transform: translate(-120px, 90px);
    -webkit-backface-visibility: hidden; }
  40% {
    -webkit-transform: translate(-128px, 98px);
    -webkit-backface-visibility: hidden; }
  60% {
    -webkit-transform: translate(-203px, -216px);
    -webkit-backface-visibility: hidden; }
  80% {
    -webkit-transform: translate(-209px, -223px);
    -webkit-backface-visibility: hidden; }
  100% {
    -webkit-transform: translate(0); } }
@-o-keyframes flight_3 {
  0% {
    -o-transform: translate(0);
    -o-backface-visibility: hidden; }
  20% {
    -o-transform: translate(-120px, 90px);
    -o-backface-visibility: hidden; }
  40% {
    -o-transform: translate(-128px, 98px);
    -o-backface-visibility: hidden; }
  60% {
    -o-transform: translate(-203px, -216px);
    -o-backface-visibility: hidden; }
  80% {
    -o-transform: translate(-209px, -223px);
    -o-backface-visibility: hidden; }
  100% {
    -o-transform: translate(0); } }
/**************  fly3 wing_action animation  *****************/
@keyframes fly3_left {
  from {
    backface-visibility: hidden;
    transform: perspective(1200px) rotateY(-60deg) rotateX(-13deg); }
  to {
    backface-visibility: hidden;
    transform: perspective(1200px) rotateY(-88deg) rotateX(-13deg); } }
@keyframes fly3_right {
  from {
    backface-visibility: hidden;
    transform: perspective(1200px) rotateY(0); }
  to {
    backface-visibility: hidden;
    transform: perspective(1200px) rotateY(-35deg); } }
@-webkit-keyframes fly3_left {
  from {
    -webkit-backface-visibility: hidden;
    -webkit-transform: perspective(1200px) rotateY(-60deg) rotateX(-13deg); }
  to {
    -webkit-backface-visibility: hidden;
    -webkit-transform: perspective(1200px) rotateY(-88deg) rotateX(-13deg); } }
@-webkit-keyframes fly3_right {
  from {
    -webkit-backface-visibility: hidden;
    -webkit-transform: perspective(1200px) rotateY(0deg); }
  to {
    -webkit-backface-visibility: hidden;
    -webkit-transform: perspective(1200px) rotateY(-35deg); } }
@-moz-keyframes fly3_left {
  from {
    -moz-backface-visibility: hidden;
    -moz-transform: perspective(1200px) rotateY(-60deg) rotateX(-13deg); }
  to {
    -moz-backface-visibility: hidden;
    -moz-transform: perspective(1200px) rotateY(-88deg) rotateX(-13deg); } }
@-moz-keyframes fly3_right {
  from {
    -moz-backface-visibility: hidden;
    -moz-transform: perspective(1200px) rotateY(0); }
  to {
    -moz-backface-visibility: hidden;
    -moz-transform: perspective(1200px) rotateY(-35deg); } }
@-o-keyframes fly3_left {
  from {
    -o-backface-visibility: hidden;
    -o-transform: perspective(1200px) rotateY(-60deg) rotateX(-13deg); }
  to {
    -o-backface-visibility: hidden;
    -o-transform: perspective(1200px) rotateY(-88deg) rotateX(-13deg); } }
@-o-keyframes fly3_right {
  from {
    -o-backface-visibility: hidden;
    -o-transform: perspective(1200px) rotateY(0); }
  to {
    -o-backface-visibility: hidden;
    -o-transform: perspective(1200px) rotateY(-35deg); } }
/*******************************************************************************************************
 butterfly_2
********************************************************************************************************/
/**************  flight_2 animation  *****************/
@keyframes flight_2 {
  0% {
    transform: translate(0);
    backface-visibility: hidden; }
  10% {
    transform: translate(0);
    backface-visibility: hidden; }
  20% {
    transform: translate(45px, 328px);
    backface-visibility: hidden; }
  30% {
    transform: translate(43px, 323px);
    backface-visibility: hidden; }
  35% {
    transform: translate(339px, 18px);
    backface-visibility: hidden; }
  50% {
    transform: translate(339px, 18px);
    backface-visibility: hidden; }
  70% {
    transform: translate(339px, 18px);
    backface-visibility: hidden; }
  85% {
    transform: translate(161px, 85px);
    backface-visibility: hidden; }
  100% {
    transform: translate(0); } }
@-moz-keyframes flight_2 {
  0% {
    -moz-transform: translate(0);
    -moz-backface-visibility: hidden; }
  10% {
    -moz-transform: translate(0);
    -moz-backface-visibility: hidden; }
  20% {
    -moz-transform: translate(45px, 328px);
    -moz-backface-visibility: hidden; }
  30% {
    -moz-transform: translate(43px, 323px);
    -moz-backface-visibility: hidden; }
  35% {
    -moz-transform: translate(339px, 18px);
    -moz-backface-visibility: hidden; }
  50% {
    -moz-transform: translate(339px, 18px);
    -moz-backface-visibility: hidden; }
  70% {
    -moz-transform: translate(339px, 18px);
    -moz-backface-visibility: hidden; }
  85% {
    -moz-transform: translate(161px, 85px);
    -moz-backface-visibility: hidden; }
  100% {
    -moz-transform: translate(0); } }
@-webkit-keyframes flight_2 {
  0% {
    -webkit-transform: translate(0);
    -webkit-backface-visibility: hidden; }
  10% {
    -webkit-transform: translate(0);
    -webkit-backface-visibility: hidden; }
  20% {
    -webkit-transform: translate(45px, 328px);
    -webkit-backface-visibility: hidden; }
  30% {
    -webkit-transform: translate(43px, 323px);
    -webkit-backface-visibility: hidden; }
  35% {
    -webkit-transform: translate(339px, 18px);
    -webkit-backface-visibility: hidden; }
  50% {
    -webkit-transform: translate(339px, 18px);
    -webkit-backface-visibility: hidden; }
  70% {
    -webkit-transform: translate(339px, 18px);
    -webkit-backface-visibility: hidden; }
  85% {
    -webkit-transform: translate(161px, 85px);
    -webkit-backface-visibility: hidden; }
  100% {
    -webkit-transform: translate(0); } }
@-o-keyframes flight_2 {
  0% {
    -o-transform: translate(0);
    -o-backface-visibility: hidden; }
  10% {
    -o-transform: translate(0);
    -o-backface-visibility: hidden; }
  20% {
    -o-transform: translate(45px, 328px);
    -o-backface-visibility: hidden; }
  30% {
    -o-transform: translate(43px, 323px);
    -o-backface-visibility: hidden; }
  35% {
    -o-transform: translate(339px, 18px);
    -o-backface-visibility: hidden; }
  50% {
    -o-transform: translate(339px, 18px);
    -o-backface-visibility: hidden; }
  70% {
    -o-transform: translate(339px, 18px);
    -o-backface-visibility: hidden; }
  85% {
    -o-transform: translate(161px, 85px);
    -o-backface-visibility: hidden; }
  100% {
    -o-transform: translate(0); } }
/**************  fly2 wing_action animation  *****************/
@keyframes fly2_left {
  from {
    backface-visibility: hidden;
    transform: perspective(1200px) rotateY(0); }
  to {
    backface-visibility: hidden;
    transform: perspective(1200px) rotateY(-75deg); } }
@keyframes fly2_right {
  from {
    backface-visibility: hidden;
    transform: perspective(1200px) rotateY(0); }
  to {
    backface-visibility: hidden;
    transform: perspective(1200px) rotateY(-75deg); } }
@-webkit-keyframes fly2_left {
  from {
    -webkit-backface-visibility: hidden;
    -webkit-transform: perspective(1200px) rotateY(0); }
  to {
    -webkit-backface-visibility: hidden;
    -webkit-transform: perspective(1200px) rotateY(75deg); } }
@-webkit-keyframes fly2_right {
  from {
    -webkit-backface-visibility: hidden;
    -webkit-transform: perspective(1200px) rotateY(0); }
  to {
    -webkit-backface-visibility: hidden;
    -webkit-transform: perspective(1200px) rotateY(-75deg); } }
@-moz-keyframes fly2_left {
  from {
    -moz-backface-visibility: hidden;
    -moz-transform: perspective(1200px) rotateY(0); }
  to {
    -moz-backface-visibility: hidden;
    -moz-transform: perspective(1200px) rotateY(-75deg); } }
@-moz-keyframes fly2_right {
  from {
    -moz-backface-visibility: hidden;
    -moz-transform: perspective(1200px) rotateY(0); }
  to {
    -moz-backface-visibility: hidden;
    -moz-transform: perspective(1200px) rotateY(-75deg); } }
@-o-keyframes fly2_left {
  from {
    -o-backface-visibility: hidden;
    -o-transform: perspective(1200px) rotateY(0); }
  to {
    -o-backface-visibility: hidden;
    -o-transform: perspective(1200px) rotateY(-75deg); } }
@-o-keyframes fly2_right {
  from {
    -o-backface-visibility: hidden;
    -o-transform: perspective(1200px) rotateY(0); }
  to {
    -o-backface-visibility: hidden;
    -o-transform: perspective(1200px) rotateY(-75deg); } }
/*******************************************************************************************************
 butterfly_4
********************************************************************************************************/
/**************  flight_4 animation  *****************/
@keyframes flight_4 {
  0% {
    transform: translate(0);
    backface-visibility: hidden; }
  15% {
    transform: translate(35px, 133px);
    backface-visibility: hidden; }
  25% {
    transform: translate(249px, 178px);
    backface-visibility: hidden; }
  35% {
    transform: translate(386px, 126px);
    backface-visibility: hidden; }
  50% {
    transform: translate(200px, 92px);
    backface-visibility: hidden; }
  70% {
    transform: translate(200px, 96px);
    backface-visibility: hidden; }
  85% {
    transform: translate(200px, 92px);
    backface-visibility: hidden; }
  100% {
    transform: translate(0); } }
@-moz-keyframes flight_4 {
  0% {
    -moz-transform: translate(0);
    -moz-backface-visibility: hidden; }
  15% {
    -moz-transform: translate(35px, 133px);
    -moz-backface-visibility: hidden; }
  25% {
    -moz-transform: translate(249px, 178px);
    -moz-backface-visibility: hidden; }
  35% {
    -moz-transform: translate(386px, 126px);
    -moz-backface-visibility: hidden; }
  50% {
    -moz-transform: translate(200px, 92px);
    -moz-backface-visibility: hidden; }
  70% {
    -moz-transform: translate(200px, 96px);
    -moz-backface-visibility: hidden; }
  85% {
    -moz-transform: translate(200px, 92px);
    -moz-backface-visibility: hidden; }
  100% {
    -moz-transform: translate(0); } }
@-webkit-keyframes flight_4 {
  0% {
    -webkit-transform: translate(0);
    -webkit-backface-visibility: hidden; }
  15% {
    -webkit-transform: translate(35px, 133px);
    -webkit-backface-visibility: hidden; }
  25% {
    -webkit-transform: translate(249px, 178px);
    -webkit-backface-visibility: hidden; }
  35% {
    -webkit-transform: translate(386px, 126px);
    -webkit-backface-visibility: hidden; }
  50% {
    -webkit-transform: translate(200px, 92px);
    -webkit-backface-visibility: hidden; }
  70% {
    -webkit-transform: translate(200px, 96px);
    -webkit-backface-visibility: hidden; }
  85% {
    -webkit-transform: translate(200px, 92px);
    -webkit-backface-visibility: hidden; }
  100% {
    -webkit-transform: translate(0); } }
@-o-keyframes flight_4 {
  0% {
    -o-transform: translate(0);
    -o-backface-visibility: hidden; }
  15% {
    -o-transform: translate(35px, 133px);
    -o-backface-visibility: hidden; }
  25% {
    -o-transform: translate(249px, 178px);
    -o-backface-visibility: hidden; }
  35% {
    -o-transform: translate(386px, 126px);
    -o-backface-visibility: hidden; }
  50% {
    -o-transform: translate(200px, 92px);
    -o-backface-visibility: hidden; }
  70% {
    -o-transform: translate(200px, 96px);
    -o-backface-visibility: hidden; }
  85% {
    -o-transform: translate(200px, 92px);
    -o-backface-visibility: hidden; }
  100% {
    -o-transform: translate(0); } }
/**************  fly4 wing_action animation  *****************/
@keyframes fly4_left {
  from {
    backface-visibility: hidden;
    transform: perspective(1200px) rotateY(0); }
  to {
    backface-visibility: hidden;
    transform: perspective(1200px) rotateY(-55deg); } }
@keyframes fly4_right {
  from {
    backface-visibility: hidden;
    transform: perspective(1200px) rotateY(0); }
  to {
    backface-visibility: hidden;
    transform: perspective(1200px) rotateY(55deg); } }
@-webkit-keyframes fly4_left {
  from {
    -webkit-backface-visibility: hidden;
    -webkit-transform: perspective(1200px) rotateY(0); }
  to {
    -webkit-backface-visibility: hidden;
    -webkit-transform: perspective(1200px) rotateY(-55deg); } }
@-webkit-keyframes fly4_right {
  from {
    -webkit-backface-visibility: hidden;
    -webkit-transform: perspective(1200px) rotateY(0); }
  to {
    -webkit-backface-visibility: hidden;
    -webkit-transform: perspective(1200px) rotateY(55deg); } }
@-moz-keyframes fly4_left {
  from {
    -moz-backface-visibility: hidden;
    -moz-transform: perspective(1200px) rotateY(0); }
  to {
    -moz-backface-visibility: hidden;
    -moz-transform: perspective(1200px) rotateY(-55deg); } }
@-moz-keyframes fly4_right {
  from {
    -moz-backface-visibility: hidden;
    -moz-transform: perspective(1200px) rotateY(0); }
  to {
    -moz-backface-visibility: hidden;
    -moz-transform: perspective(1200px) rotateY(-55deg); } }
@-o-keyframes fly4_left {
  from {
    -o-backface-visibility: hidden;
    -o-transform: perspective(1200px) rotateY(0); }
  to {
    -o-backface-visibility: hidden;
    -o-transform: perspective(1200px) rotateY(-55deg); } }
@-o-keyframes fly4_right {
  from {
    -o-backface-visibility: hidden;
    -o-transform: perspective(1200px) rotateY(0); }
  to {
    -o-backface-visibility: hidden;
    -o-transform: perspective(1200px) rotateY(-55deg); } }
/* layout style */
#wrapper {
  width: 1349px;
  margin: 0 auto;
  position: relative; }

/* index css3 objects css */
.flower {
  animation-name: scale_2x;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  -moz-animation-name: scale_2x;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: alternate;
  -moz-animation-timing-function: ease-in-out;
  -ms-animation-name: scale_2x;
  -ms-animation-iteration-count: infinite;
  -ms-animation-direction: alternate;
  -ms-animation-timing-function: ease-in-out;
  -o-animation-name: scale_2x;
  -o-animation-iteration-count: infinite;
  -o-animation-direction: alternate;
  -o-animation-timing-function: ease-in-out;
  -webkit-animation-name: scale_2x;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;
  position: absolute; }

.flower_1 {
  width: 350px;
  height: 350px;
  top: 250px;
  left: 0px;
  background: transparent url(../img/flower_1.png) 0 0 no-repeat;
  z-index: 0;
  animation-name: scale_1x;
  -moz-animation-name: scale_1x;
  -ms-animation-name: scale_1x;
  -o-animation-name: scale_1x;
  -webkit-animation-name: scale_1x;
  animation-duration: 2s;
  -moz-animation-duration: 2s;
  -ms-animation-duration: 2s;
  -o-animation-duration: 2s;
  -webkit-animation-duration: 2s; }

.flower_2 {
  width: 130px;
  height: 130px;
  top: 440px;
  left: 300px;
  background: transparent url(../img/flower_2.png) 0 0 no-repeat;
  z-index: 1;
  animation-duration: 1.1s;
  -moz-animation-duration: 1.1s;
  -ms-animation-duration: 1.1s;
  -o-animation-duration: 1.1s;
  -webkit-animation-duration: 1.1s; }

.flower_3 {
  width: 180px;
  height: 180px;
  top: 460px;
  left: 500px;
  background: transparent url(../img/flower_3.png) 0 0 no-repeat;
  z-index: 0;
  animation-duration: 1.6s;
  -moz-animation-duration: 1.6s;
  -ms-animation-duration: 1.6s;
  -o-animation-duration: 1.6s;
  -webkit-animation-duration: 1.6s; }

.flower_4 {
  width: 130px;
  height: 126px;
  top: 430px;
  left: 650px;
  background: transparent url(../img/flower_4.png) 0 0 no-repeat;
  z-index: 1;
  animation-duration: 1.4s;
  -moz-animation-duration: 1.4s;
  -ms-animation-duration: 1.4s;
  -o-animation-duration: 1.4s;
  -webkit-animation-duration: 1.4s; }

.flower_5 {
  width: 100px;
  height: 100px;
  top: 460px;
  right: 150px;
  background: transparent url(../img/flower_5.png) 0 0 no-repeat;
  animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  -webkit-animation-duration: 1s; }

/* .butterfly1 css */
.butterfly1 {
  width: 90px;
  height: 102px;
  position: relative;
  top: 150px;
  left: 20px;
  -moz-animation: flight_1 10s infinite cubic-bezier(0.3, 0, 0.7, 1);
  -webkit-animation: flight_1 10s infinite cubic-bezier(0.3, 0, 0.7, 1);
  -ms-animation: flight_1 10s infinite cubic-bezier(0.3, 0, 0.7, 1);
  -o-animation: flight_1 10s infinite cubic-bezier(0.3, 0, 0.7, 1);
  animation: flight_1 10s infinite cubic-bezier(0.3, 0, 0.7, 1); }

.butterfly1_body {
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 0px;
  left: 28px;
  background: url(../img/butterfly1/butterfly_body.png) no-repeat; }

.butterfly1_left {
  width: 47px;
  height: 95px;
  position: absolute;
  top: 0;
  left: 0;
  background: url(../img/butterfly1/butterfly_left.png) no-repeat;
  animation-fill-mode: forwards;
  animation: fly1_left 0.3s infinite alternate;
  -webkit-animation: fly1_left 0.3s infinite alternate;
  -o-animation: fly1_left 0.3s infinite alternate;
  -moz-animation: fly1_left 0.3s infinite alternate;
  -ms-animation: fly1_left 0.3s infinite alternate;
  -moz-transform-origin: right;
  -webkit-transform-origin: right;
  -o-transform-origin: right;
  -ms-transform-origin: right;
  transform-origin: right; }

.butterfly1_right {
  width: 49px;
  height: 38px;
  position: absolute;
  top: 43px;
  right: 0px;
  background: url(../img/butterfly1/butterfly_right.png) no-repeat;
  animation: fly1_right 0.3s infinite alternate;
  -webkit-animation: fly1_right 0.3s infinite alternate;
  -o-animation: fly1_right 0.3s infinite alternate;
  -moz-animation: fly1_right 0.3s infinite alternate;
  -ms-animation: fly1_right 0.3s infinite alternate;
  -moz-transform-origin: 8%;
  -webkit-transform-origin: 8%;
  -o-transform-origin: 8%;
  -ms-transform-origin: 8%;
  transform-origin: 8%; }

/* .butterfly3 css */
.butterfly3 {
  width: 90px;
  height: 102px;
  position: relative;
  top: 135px;
  left: 1251px;
  -moz-animation: flight_3 10s infinite cubic-bezier(0.3, 0, 0.7, 1);
  -webkit-animation: flight_3 10s infinite cubic-bezier(0.3, 0, 0.7, 1);
  -ms-animation: flight_3 10s infinite cubic-bezier(0.3, 0, 0.7, 1);
  -o-animation: flight_3 10s infinite cubic-bezier(0.3, 0, 0.7, 1);
  animation: flight_3 10s infinite cubic-bezier(0.3, 0, 0.7, 1);
  animation-delay: 3s;
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -ms-animation-delay: 3s;
  -o-animation-delay: 3s; }

.butterfly3_body {
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 0px;
  right: 28px;
  background: url(../img/butterfly3/butterfly_body.png) no-repeat; }

.butterfly3_left {
  width: 49px;
  height: 38px;
  position: absolute;
  top: 43px;
  left: 1px;
  background: url(../img/butterfly3/butterfly_left.png) no-repeat;
  animation: fly3_left 0.3s infinite alternate;
  -webkit-animation: fly3_left 0.3s infinite alternate;
  -o-animation: fly3_left 0.3s infinite alternate;
  -moz-animation: fly3_left 0.3s infinite alternate;
  -ms-animation: fly3_left 0.3s infinite alternate;
  -moz-transform-origin: 92%;
  -webkit-transform-origin: 92%;
  -o-transform-origin: 92%;
  -ms-transform-origin: 92%;
  transform-origin: 92%; }

.butterfly3_right {
  width: 47px;
  height: 95px;
  position: absolute;
  top: 0px;
  right: -1px;
  background: url(../img/butterfly3/butterfly_right.png) no-repeat;
  animation: fly3_right 0.3s infinite alternate;
  -webkit-animation: fly3_right 0.3s infinite alternate;
  -o-animation: fly3_right 0.3s infinite alternate;
  -moz-animation: fly3_right 0.3s infinite alternate;
  -ms-animation: fly3_right 0.3s infinite alternate;
  -moz-transform-origin: left;
  -webkit-transform-origin: left;
  -o-transform-origin: left;
  -ms-transform-origin: left;
  transform-origin: left; }

/* .butterfly2_80 css */
.butterfly2 {
  width: 77px;
  height: 86px;
  position: relative;
  top: 13px;
  z-index: 1;
  left: 630px;
  -moz-animation: flight_2 15s infinite cubic-bezier(0.3, 0, 0.7, 1);
  -webkit-animation: flight_2 15s infinite cubic-bezier(0.3, 0, 0.7, 1);
  -ms-animation: flight_2 15s infinite cubic-bezier(0.3, 0, 0.7, 1);
  -o-animation: flight_2 15s infinite cubic-bezier(0.3, 0, 0.7, 1);
  animation: flight_2 15s infinite cubic-bezier(0.3, 0, 0.7, 1);
  animation-delay: 2s;
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -ms-animation-delay: 2s;
  -o-animation-delay: 2s; }

.butterfly2_body {
  width: 6px;
  height: 23px;
  position: absolute;
  bottom: 28px;
  left: 42px;
  background: url(../img/butterfly2/butterfly_body.png) no-repeat; }

.butterfly2_left {
  width: 43px;
  height: 66px;
  position: absolute;
  top: 0;
  left: 0;
  background: url(../img/butterfly2/butterfly_left.png) no-repeat;
  animation: fly2_right 0.2s infinite alternate;
  -webkit-animation: fly2_right 0.2s infinite alternate;
  -o-animation: fly2_right 0.2s infinite alternate;
  -moz-animation: fly2_right 0.2s infinite alternate;
  -ms-animation: fly2_right 0.2s infinite alternate;
  -moz-transform-origin: right;
  -webkit-transform-origin: right;
  -o-transform-origin: right;
  -ms-transform-origin: right;
  transform-origin: right; }

.butterfly2_right {
  width: 28px;
  height: 60px;
  position: absolute;
  bottom: 20px;
  right: 0px;
  background: url(../img/butterfly2/butterfly_right.png) no-repeat;
  animation: fly2_left 0.2s infinite alternate;
  -webkit-animation: fly2_left 0.2s infinite alternate;
  -o-animation: fly2_left 0.2s infinite alternate;
  -moz-animation: fly2_left 0.2s infinite alternate;
  -ms-animation: fly2_left 0.2s infinite alternate;
  -moz-transform-origin: left;
  -webkit-transform-origin: left;
  -o-transform-origin: left;
  -ms-transform-origin: left;
  transform-origin: left; }

/* .butterfly2_110 css */
.butterfly4 {
  width: 102px;
  height: 95px;
  position: relative;
  top: 0px;
  left: 285px;
  z-index: 1;
  -moz-animation: flight_4 20s infinite cubic-bezier(0.3, 0, 0.7, 1);
  -webkit-animation: flight_4 20s infinite cubic-bezier(0.3, 0, 0.7, 1);
  -ms-animation: flight_4 20s infinite cubic-bezier(0.3, 0, 0.7, 1);
  -o-animation: flight_4 20s infinite cubic-bezier(0.3, 0, 0.7, 1);
  animation: flight_4 20s infinite cubic-bezier(0.3, 0, 0.7, 1); }

.butterfly4_body {
  width: 8px;
  height: 31px;
  position: absolute;
  bottom: 10px;
  left: 50px;
  background: url(../img/butterfly4/butterfly_body.png) no-repeat; }

.butterfly4_left {
  width: 52px;
  height: 92px;
  position: absolute;
  top: 0;
  left: 0;
  background: url(../img/butterfly4/butterfly_left.png) no-repeat;
  animation: fly4_left 0.35s infinite alternate;
  -webkit-animation: fly4_left 0.35s infinite alternate;
  -o-animation: fly4_left 0.35s infinite alternate;
  -moz-animation: fly4_left 0.35s infinite alternate;
  -ms-animation: fly4_left 0.35s infinite alternate;
  -moz-transform-origin: right;
  -webkit-transform-origin: right;
  -o-transform-origin: right;
  -ms-transform-origin: right;
  transform-origin: right; }

.butterfly4_right {
  width: 44px;
  height: 80px;
  position: absolute;
  bottom: 0px;
  right: 0px;
  background: url(../img/butterfly4/butterfly_right.png) no-repeat;
  animation: fly4_right 0.35s infinite alternate;
  -webkit-animation: fly4_right 0.35s infinite alternate;
  -o-animation: fly4_right 0.35s infinite alternate;
  -moz-animation: fly4_right 0.35s infinite alternate;
  -ms-animation: fly4_right 0.35s infinite alternate;
  -moz-transform-origin: left;
  -webkit-transform-origin: left;
  -o-transform-origin: left;
  -ms-transform-origin: left;
  transform-origin: left; }

/*# sourceMappingURL=style.css.map */

Comments