CSSのアニメーションでアイコンを動かしてみた

/

導入

前にCSSのtransitionを試した事はあったのですが、animationプロパティを使った事はなかったので手始めにアイコンを動かしてみました。

CodePen

See the Pen CSS animation icon by koltatt (@koltatt) on CodePen.

Keyframes

CSS3のanimationではtransitionと共通のプロパティに加えてkeyframesを設定することでより複雑な挙動を実装する事が出来ます。

keyframesは以下のように実行させたい挙動を設定してから、その他のプロパティと一緒にアニメーションさせたい対象に指定します。

animation: my_animation 2s ease 1s;
@keyframes my_animation {
  0% {
    width: 100px;
  }
  50% {
    width: 200px;
  }
  100% {
    width: 400px;
  }
  40%, 80% {
    color: #2a2a2a;
  }
}

keyframesでは各プロパティを変化させるタイミングをパーセンテージで指定します。パーセンテージの他にfromとtoのキーワードを使う事も出来ますが、この2つは0%と100%と同じ意味なので使うメリットはあまり無さそうです。

コード

今回はアイコンを動かしたかったのでfontawesomeを使っていますが、pタグなどでも同様の動きをしてくれます。

<div class="container">
  <div class="icon icon1">
    <i class="fa fa-exclamation" aria-hidden="true"></i>
  </div>      
  <div class="icon icon2">
     <i class="fa fa-thumbs-up" aria-hidden="true"></i>
  </div>
  <div class="icon icon3">
    <i class="fa fa-mobile" aria-hidden="true"></i>
  </div>
  <div class="icon icon4">
    <i class="fa fa-hourglass" aria-hidden="true"></i>
  </div>
  <div class="icon icon5">
    <i class="fa fa-star" aria-hidden="true"></i>
  </div>
  <div class="icon icon6">
    <i class="fa fa-github-alt" aria-hidden="true"></i>
  </div>
  <div class="icon icon7">
    <i class="fa fa-heart" aria-hidden="true"></i>
  </div>
</div>

スタイルシートはscssを利用しました。

.container {
  padding: 70px 0;
  text-align: center;
  .icon {
    display: inline-block;
    margin: 0 20px;
    font-size: 40px;
    &.icon1 {
      i {
        animation: icon1 2s ease-out 1s forwards;      
      }
    }
    &.icon2 {
      i {
          transform: scale(1);
          animation: icon2 2s ease-in 1s forwards;
      }
    }
    &.icon3 {
      i {
        opacity: 0;
        animation: icon3 1.5s ease-out 1s forwards;
      }
    }
    &.icon4 {
      i {
        animation: icon4 1.5s ease-in-out 1s forwards;
      }
    }
    &.icon5 {
      i {
          animation: icon5 1.5s ease-in-out 1s forwards;
      }
    }
    &.icon6 {
      i {
          opacity: 0;
          bottom: 80px;
          transform-origin: 50% 75%;
          animation: icon6 1.5s linear 1s forwards;
      }
    }
    &.icon7 {
      i {
        transform-origin: 0% 0%;
        animation: icon7 1.5s ease-out 1s forwards;
      }
    }
  }
}

@keyframes icon1 {
    0%,10%,20% {
        transform: rotate(-10deg);
    }
    5%,15% {
        transform: rotate(60deg);
    }
    25%,90% {
        transform: rotate(40deg);
    }
    100% {
        transform: rotate(0deg);
    }
    25%,100% {
        color: #D50000;
    }
}

@keyframes icon2 {
    0% {
        transform: scale(0);
    }
    10% {
        transform: scale(2.5);
    }
    20% {
        transform: scale(.8);
    }
    40% {
        transform: scale(1.8);
    }
    100% {
        transform: scale(1);
    }
    0%, 30% {
        color: black;
    }
    31%, 100% {
        color: #AEEA00;
    }
}

@keyframes icon3 {
    0% {
        transform: translateX(0px);
        opacity: 0;
    }
    5%,15%,25%,35%,45% {
        transform: translateX(5px);
    }
    10%,20%,30%,40%,50% {
        transform: translateX(-5px);
    }
    55%,65%,75%,85%,95% {
        transform: translateX(3px);
    }
    60%,70%,80%,90% {
        transform: translateX(-3px);
    }
    50% {
        opacity: .5;
        stroke-dashoffset: 0;
    }
    80% {
        opacity: 1;        
    }
    100% {
        transform: translateX(0px);
        opacity: 1;
    }
    0%,50% {
        color: black;
    }
    50%,100% {
        color: #0091EA;
    }
}

@keyframes icon4 {
    0%, 30% {
        transform: rotate(0deg);
    }
    40% {
        transform: rotate(360deg);
    }
    50% {
        transform: rotate(720deg);
    }
    60% {
        transform: rotate(1080deg);        
    }
    70%,100% {
        transform: rotate(1440deg);        
    }
    0%,100% {
        bottom: 0px;
    }
    30%,80% {
        bottom: 20px;
    }
    0%,50% {
        color: black;
    }
    60%,100% {
        color: #FF6D00;
    }
}

@keyframes icon5 {
    0% {
        transform: rotate(0deg);
    }
    30% {
        transform: rotate(0deg);
    }
    40% {
        transform: rotateY(360deg);
    }
    50% {
        transform: rotateY(720deg);
    }
    60% {
        transform: rotateY(1080deg);        
    }
    70% {
        transform: rotateY(1440deg);        
    }
    80% {
        transform: rotateY(1440deg);
    }
    100% {
        transform: rotateY(1440deg);
    }
    30%,80% {
        bottom: 20px;
    }
    0%,100% {
        bottom: 0%;
    }
    0%,50% {
        color: black;
    }
    60%,100% {
        color: yellow;
    }
}

@keyframes icon6 {
    0% {
        transform: scale(.2, 1);
        bottom: 80px;
    }
    2% {
        transform: scale(.2, 1);
        bottom: 0px;
    }
    40% {
        transform: scale(2, .2);
    }
    50% {
        transform: scale(.2, 1);
    }
    60% {
        transform: scale(1.8, .4);
    }
    70%,100% {
        transform: scale(1, 1);
        bottom: 0px;
    }
    3%,100% {
        opacity: 1;
    }
    0%, 40% {
        color: black;
    }
    41%,100%{
        color:#651FFF;
    }
}

@keyframes icon7 {
    0%,100% {
        transform: rotate(0deg);
    }
    5%,90% {
        transform: rotate(-50deg);
    }
    0%,40% {
        opacity: 1;
    }
    52%,56%,60%,64%,68%,72% {
        opacity: .3;
    }
    54%,58%,62%,66%,70%,74% {
        opacity: 1;
    }
    0%,74% {
        color: black;
    }
    75%,100% {
        color: #FF4081;
    }
}