<div class="borboletas">
  <div class="borboleta-1">
    <div class="borboleta-oval-squish">
      <div class="borboleta-oval">
        <div class="borboleta-radial">
          <div class="borboleta-gfx">
            <div class="borboleta-anim"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="borboleta-2">
    <div class="borboleta-oval-squish">
      <div class="borboleta-oval">
        <div class="borboleta-radial">
          <div class="borboleta-gfx">
            <div class="borboleta-anim"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@import "compass/css3";

body{
  background:transparent;
}

@include keyframes(borboletas-pos-loop){
  0% {@include transform(translate(0,0));}
  25% {@include transform(translate(100px,0));}
  50% {@include transform(translate(30px,-70px));}
  75% {@include transform(translate(00px,20px));}
  100% {@include transform(translate(-100px,-50px));}
}
.borboletas{
  position:absolute;
  left:20%;
  bottom:100px;
  @include animation(borboletas-pos-loop 7s ease-in-out infinite alternate-reverse);
}
.borboleta-oval-squish{
  @include transform(scale(0.3,1));
}

$borboleta-1-radial:10s;
$borboleta-2-radial:15s;
$borboleta-1-oval:1.2s;
$borboleta-2-oval:1.5s;
@include keyframes(borboleta-radial-loop) {
  0%   { @include transform(rotate(0)); }
  100% { @include transform(rotate(360deg)); }
}
.borboleta-1{
  @include animation(borboleta-radial-loop $borboleta-1-radial linear infinite);
}
.borboleta-2{
  @include animation(borboleta-radial-loop $borboleta-2-radial linear infinite);
}

@include keyframes(borboleta-oval-loop) {
  0%   { @include transform(rotate(0) scale(3.3,1)); }
  100% { @include transform(rotate(-360deg) scale(3.3,1)); }
}
.borboleta-oval{
  position:absolute;
  @include animation(borboleta-radial-loop $borboleta-1-oval linear infinite);
}
.borboleta-radial{
  position:absolute;
  left:80px;
  top:0;
  @include animation(borboleta-oval-loop $borboleta-1-oval linear infinite)
}
.borboleta-2 .borboleta-oval{
  @include animation(borboleta-radial-loop $borboleta-2-oval linear infinite);
}
.borboleta-2 .borboleta-radial{
  @include animation(borboleta-oval-loop $borboleta-2-oval linear infinite);
}
.borboleta-gfx{
  position:absolute;
  top:0;
  left:0;
  // background:red;
  width:25px;
  height:20px;
}
@include keyframes(borboleta-gfx-upright-loop){
  0%   { @include transform(rotate(0)); }
  100% { @include transform(rotate(-360deg)); }
} 
.borboleta-1 .borboleta-gfx{
  @include animation(borboleta-gfx-upright-loop $borboleta-1-radial linear infinite);
}
.borboleta-2 .borboleta-gfx{
  @include animation(borboleta-gfx-upright-loop $borboleta-2-radial linear infinite);
}
@include keyframes(borboleta-anim-loop){
  0%   {@include transform(scale(1,1.2) rotate(40deg));}
  100% {@include transform(scale(0.7,-1) rotate(-40deg));}
}
.borboleta-anim{
  $circle:radial-gradient(closest-side at 50% 50%,#F7C359 50%,transparentize(#F7C359,1) 50%);
  background:$circle,$circle;
  background-repeat:no-repeat;
  background-size:90% 70%,100% 70%;
  background-position:20% -40%,0 40%;
  width:25px;
  height:20px;
  @include animation(borboleta-anim-loop 150ms ease-in-out infinite alternate-reverse);
}