【現場だより vol.1】CSSアニメーションをはじめよう！

WEBサイトが作れるようになると、やはりアニメーションをつけたくなります。
私、アニメーションがすごいサイトを見ると、開発者魂に火がつきます。

vol.1はCSSアニメーションについて実践を交えて紹介したいと思います。

@keyframes

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  } 
  100% {
    transform: scale(1);
  }
}

プロパティをどこからどのように変化させるのかを定義します。

0%は初期値、100%は最終値になります。
50%として値を設定することもできます。

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

この場合は、中間まで拡大し、その後は縮小して初期値に戻るパターンです。

そこで、よく使われるのはマウスホバーエフェクトで、画像が拡大するパターンです。

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.15);
  }
}

a img {
  animation: zoomUp 10s linear 0s 1 normal both;
}

よく見ますね！このエフェクト。
パターンは簡単なので、覚えていきましょう。

フェードインもよくあるパターンです。

@keyframes fadeIn {
  0% {
    opacity:0;
    width:200px;
  }
  100% {
    opacity:1;
    width:400px;
  }
}

実際に組み込んで、いろんなkeyframeアニメーションを作ってみましょう。
覚えると楽しくなります。

次回、vol.2は、「TweenMaxでアニメーションをさせてみよう！」です。

参考サイト
【CSS3】@keyframes と animation 関連のまとめ
https://qiita.com/7968/items/1d999354e00db53bcbd8