CSS
animation
keyframes

連続したCSSアニメーションの実装

はじめに

keyframesを使ったcssでのアニメーションは、gif画像の埋め込みと比べると読み込み速度も早く、パフォーマンスも良く、動きも滑らかです。

gif のようにどのようなアニメーションでも表現できるわけではありませんが、

1. 出現時のみ強調されたアニメーションが表示される
2. 以降、別のアニメーションがループして表示される

といったようなカスタマイズが可能なので、その実装方法を紹介します。

サンプル

だいぶ荒いですが、こんなイメージです。

NEW.gif

コードは JSFiddle で公開していますので、実際の動作もこちらでご確認ください。

コード説明

ある程度カスタマイズできたほうが便利だと思うので、軽く説明します。

html

main.html
<div class="container container-open">
  <span class="elem-open-1 elem-common">N</span>
  <span class="elem-open-2 elem-common">E</span>
  <span class="elem-open-3 elem-common">W</span>
</div>

html は上記の通りです。N, E, W の 3 文字の動きを少しずつずらすために、別のclassを付けます。

回転して表示する

main.css
@keyframes open-container-anim {
  0% { 
    transform: scale(0) rotate(-90deg);
  }
  60% {
    transform: scale(0) rotate(-90deg);
  }
  100% { 
    transform: scale(1) rotate(0deg);
  }
}

.container-open {
  animation: open-container-anim 600ms alternate;
}

まずは、回転させながら大きくします。
keyframes で transform を指定して、大きくしながらかつ、90°回転させて全体を表示させます。

表示タイミングだけ NEW の文字を強調する

@keyframes open-elem-anim {
  0% { 
    bottom: 0;
    color: red;
    transform: scale(1);
  }

  60% {
    bottom: 5px;
    color: yellow;
    transform: scale(1.2);
  }

  100% { 
    bottom: 0;
    color: red;
    transform: scale(1);
  }
}

.elem-open-1 {
  animation: open-elem-anim 600ms alternate 400ms forwards;
}

.elem-open-2 {
  animation: 
    open-elem-anim 600ms alternate 500ms forwards;
}

.elem-open-3 {
 animation: 
    open-elem-anim 600ms alternate 600ms forwards;
}

container が表示されるまで 600ms としたので、大体回転し終わるくらいから強調アニメーションを開始します。それぞれの要素で、400ms, 500ms, 600ms の delayをかけているので、左の文字から順に大きく強調されます。

表示タイミングのアニメーションが終わったら次のアニメーションをループ実行させる

@keyframes idle-anim {
  0% {
    bottom: 0;
    color: red;
  }

  50% {
    bottom: 0px;
    color: red;
  }

  100% {
    bottom: 3px;
    color: orange;
  }
}

.elem-open-1 {
  animation: 
    open-elem-anim 600ms alternate 400ms forwards,
    idle-anim 600ms infinite 1200ms alternate;
}

.elem-open-2 {
  animation: 
    open-elem-anim 600ms alternate 500ms forwards,
    idle-anim 600ms infinite 1400ms alternate;
}

.elem-open-3 {
 animation: 
    open-elem-anim 600ms alternate 600ms forwards,
    idle-anim 600ms infinite 1600ms alternate;
}

先ほどの強調アニメーション(open-elem-anim)が終わった後、別のアニメーション(idle-anim)をループさせます。

ひとつ前のアニメーションに forward を指定し、次に別のアニメーションに繋げることができます。また、 idle-anim には infinite を指定しているのでループしてこのアニメーションが表示される寸法です。

ぜひカスタマイズして使ってみてください!

参考