株式会社HUBFACTORY - 新たなつながりを作るサービス・アプリ・WEB制作会社 -
CREATE A NEW HUB
IN THE WEB SEARVICE...
PICK UP

web

WEBサイト制作講座 | 動きのあるページ制作4「CSS キーフレームアニメーション」

2017.11.21

CATEGORY - web

CSSのアニメーションで、今までに、transition というプロパティはちょっとだけ説明しました。
CSSアニメーションでは、もう1つ、animationというプロパティがあります。
これは、キーフレームを指定してアニメーションさせることができます^^

キーフレームアニメーションとは、要は、時間を設定して、その中の、「開始点」「中間点」「終了点」などを「%」で指定して、アニメーションさせてつなげることができる感じです。

ふわふわ

CSSアニメーション:キーフレームアニメーション

今回は、ふわふわ浮かんでいるようなアニメーションを作ってみたいと思います。

まず、完成図から。

CSSキーフレームアニメーション

こんな感じでのアニメーションを CSSの「animationプロパティ」を使って、キーフレームアニメーションを作っていこうと思います。

「CSS キーフレームアニメーション」で作成する完成版のファイルはこちらからダウンロードできます↓↓

CSS キーフレームアニメーション 完成版ファイル

各キャラクターで、ちょっと違ったタイミングでアニメーションさせたいので、切り分けられるようにクラスをつけておきます。

<ul class="charactor-list">
  <li>
    <div class="charactor-icon icon_1">
      <img src="assets/images/chara/icon_1.png" alt="一ノ瀬麻衣" width="220">
    </div>
    <div class="charactor-name">
      一ノ瀬麻衣
    </div>
  </li>
  <li>
    <div class="charactor-icon icon_2">
      <img src="assets/images/chara/icon_2.png" alt="平山彩菜" width="220">
    </div>
    <div class="charactor-name">
      平山彩菜
    </div>
  </li>
  <li>
    <div class="charactor-icon icon_3">
      <img src="assets/images/chara/icon_3.png" alt="橘あかり" width="220">
    </div>
    <div class="charactor-name">
      橘あかり
    </div>
  </li>
  <li>
    <div class="charactor-icon icon_4">
      <img src="assets/images/chara/icon_4.png" alt="ナンナ・リモノフ" width="220">
    </div>
    <div class="charactor-name">
      ナンナ・リモノフ
    </div>
  </li>
  <li>
    <div class="charactor-icon icon_5">
      <img src="assets/images/chara/icon_5.png" alt="凛" width="220">
    </div>
    <div class="charactor-name">
      凛
    </div>
  </li>
</ul>

こんな感じで、それぞれのキャラクターに、icon_1 から icon_5 までのクラスをつけてみました。

で、それぞれのクラスに対して、キーフレームアニメーションを指定していくことにします。

ということで、CSS側です。

横道にそれて、マウスオーバーの設定w

.charactor-icon {
  cursor: pointer;
}

.charactor-icon img {
  transition: all 0.5s ease-in-out;
}

.charactor-icon img:hover {
  transform: scale(1.1);
}

ちょっと、横道にそれて、なんとなく、マウスオーバーしたときに、キャラクターが拡大するようにしてみました笑
マウスオーバー時に、transformプロパティで拡大して、画像自体に transitionプロパティを設定して、アニメーションして拡大縮小するようにしてます。

animationプロパティの設定

.charactor-icon.icon_1 {
  animation: fuwa_anim_1 3s ease-in-out infinite;
}

.charactor-icon.icon_2 {
  animation: fuwa_anim_3 3s ease-in-out infinite;
}

.charactor-icon.icon_3 {
  animation: fuwa_anim_2 3s ease-in-out infinite;
}

.charactor-icon.icon_4 {
  animation: fuwa_anim_3 3s ease-in-out infinite;
}

.charactor-icon.icon_5 {
  animation: fuwa_anim_1 3s ease-in-out infinite;
}

各アイコンのクラスに animationプロパティを設定しました。

animationプロパティの指定の仕方ですが、

「アニメーション名」「アニメーション1回分の長さ」「アニメーションの仕方」「繰り返し回数」

って感じで指定してます。
(※他にも指定できる項目があるので、詳しく知りたい方は調べてみてください。)

例えば、icon_1 に対しては、

アニメーション名: fuwa_anim_1 というアニメーションを、
アニメーション1回分の長さ: 3秒間 かけて、
アニメーションの仕方: ease-in-out → ゆっくり始まってゆっくり終わる方法で、
繰り返し回数: infinite → 無限に繰り返す

という感じです。

以上で、animationプロパティの指定は完了です^^

ただ、これだけではなにも動きません。
アニメーション名で指定した、「fuwa_anim_1、fuwa_anim_2、fuwa_anim_3」をキーフレームアニメーションで作ってあげないといけません。

CSSキーフレームアニメーション

@keyframes fuwa_anim_1 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes fuwa_anim_2 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(15px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes fuwa_anim_3 {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(5px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}

キーフレームアニメーションは、こんな感じで設定してあげます。

@keyframes」をつけてあげて、名前に、アニメーション名を指定します。
そして、中括弧({})の中を、時間軸に沿って、「%」で指定してあげて、その「%」の時に、どういう状態になっているかを指定してあげます。

例えば、「fuwa_anim_1」のアニメーションは、

アニメーション開始時(0%): 縦軸(Y軸)への移動なし。
アニメーション中間点(50%): 縦軸(Y軸)に、-10px 移動。(上に10px移動)
アニメーション終了時(0%): 縦軸(Y軸)への移動なし。(元に戻る)

といった感じになります。

これ、使いこなせると、いろいろな動きができるようになるので、いろいろアイディアが浮かんだら、やってみてください^^

今回のポイント

  1. CSSアニメーションには、 transitionプロパティと、animationプロパティがある!
  2. CSSの animationプロパティは、キーフレームアニメーションができる!

 

株式会社HUBFACTORY(ハブファクトリー) - 新たなつながりを作るサービス・アプリ・WEB制作会社 -

© 2014-2015 HUBFACTORY.INC

PAGE TOP