みかづきブログ その3

3ヶ月つづけてみました。

今日のCSSアニメーション その8

蝶を目指しました。


DEMO


HTML

<div class="arc">
  <div class="box">
    <div class="butterfly">
      <div class="head"></div>
      <div class="body">
        <div class="wing l"></div>
        <div class="wing r"></div>
      </div>
    </div>
  </div>
</div>

SCSS

%block {
  display: block;
  position: absolute;
  border: solid rgba(0, 0, 0, 0);
  width: 0; height: 0;
}

body {
  background: #000;
}

.arc {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
  border-radius: 50%;
  width: 320px; height: 320px;
  background: #fff;
  -webkit-filter: blur(1px);
}

.box {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  animation: move 3.6s ease-in-out infinite;
}

.butterfly {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  animation: fly 1.8s ease-in-out infinite alternate;
}

.head {
  @extend %block;
  top: -20px; left: -10px;
  border-width: 10px;
  border-top: solid 20px rgba(0, 0, 0, 1);
  
  &:before {
    @extend %block;
    top: -55px; left: -12px;
    content: "";
    border-top: solid 30px rgba(0, 0, 0, 1);
    transform: rotate(-8deg);
  }
  
  &:after {
    @extend %block;
    top: -55px; right: -12px;
    content: "";
    border-top: solid 30px rgba(0, 0, 0, 1);
    transform: rotate(8deg);
  }
}

.body {
  @extend %block;
  top: 10px; left: -10px;
  border-width: 10px;
  border-bottom: solid 25px rgba(0, 0, 0, 1);
  
  .wing {
    position: absolute;
    top: 10px;
    animation: swing .6s ease-in-out infinite alternate;
    
    &.l {
      transform: rotateY(10deg);
      transform-origin: right center;
      
      &:before {
        @extend %block;
        top: -60px; left: -85px;
        border-width: 40px;
    border-left: solid 80px rgba(0, 0, 0, 1);
        content: "";
        transform: rotate(8deg) skewX(8deg);
        transform-origin: right center;
      }

      &:after {
        @extend %block;
        top: -70px; left: -80px;
        border-width: 30px;
    border-left: solid 70px rgba(0, 0, 0, 1);
        content: "";
        transform: rotate(-42deg) skewX(8deg);
        transform-origin: right center;
      }
    }
    
    &.r {
      transform-origin: left center;
      
      &:before {
        @extend %block;
        top: -60px; left: -35px;
        border-width: 40px;
    border-right: solid 80px rgba(0, 0, 0, 1);
        content: "";
        transform: rotate(-8deg) skewX(-8deg);
        transform-origin: left center;
      }
      
      &:after {
        @extend %block;
        top: -70px; right: -80px;
        border-width: 30px;
    border-right: solid 70px rgba(0, 0, 0, 1);
        content: "";
        transform: rotate(42deg) skewX(-8deg);
        transform-origin: left center;
      }
    }
  }
}

@keyframes swing {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(-60deg);
  }
}

@keyframes fly {
  0% {
    transform: rotateZ(0deg);
  }
  33% {
    transform: rotateZ(10deg);
  }
  66% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-10deg);
  }
}

@keyframes move {
  0% {
    transform: scale(.5) translate(-300px, 300px);
  }

  50% {
    transform: scale(.6) translate(0, 0);
  }
  
  100% {
    transform: scale(.5) translate(300px, -300px);
  }
}