LoginSignup
9

More than 5 years have passed since last update.

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

Posted at

はじめに

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 を指定しているのでループしてこのアニメーションが表示される寸法です。

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

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9