TL;DR

いざアニメーションを作ろうとすると結構面倒ですよね。できれば勉強しながら便利なツールを使ってアニメーションを作りたいところ。今回は CSS3 のアニメーションで「ふわふわ」させたり「スカッシュ」させる方法や便利なオンラインツールをご紹介します。

アニメーション１２の基本原則を確認

こちらは「何か動きを出してくれ」と依頼された時に見ておきたい、ディズニーによって開発されたアニメーションの１２の基本原則（12 basic principles of animation - Wikipedia）デモですが、CSS のみでこういった動きやアニメーションを実現できたら楽しいですよね。ロゴやボタン、イラストなどの一部に使ったら一味違うアイキャッチになるかもしれません。

THE ILLUSION OF LIFE

CSS アニメーションとサンプルソースコードなどについてはこちらで解説しています。

基本

以下のように、transform:translateYで縦方向の動きを指定するだけで上下に「ふわふわ」します。無限再生させるためにinfiniteをつけます。

.foo {
  background: #000;
  width: 100px;
  height: 100px;
  animation: fluffy1 3s ease infinite;
}

@keyframes fluffy1 {
  0% {
    transform: translateY(0);
  }
  5% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-15px);
  }
  25% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-15px);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}

transform:translateYをtransform:translateXに変更すると横にふわふわ動きます。

スカッシュ＆ストレッチ

１２の基本原則にある「ベタンと潰れて伸びる」ような比較的シンプルな動きはscaleとtranslateを組み合わせて作れます。少しだけアニメーションっぽい動きになってきました。

.foo {
  background: #000;
  width: 20px;
  height: 100px;
  margin: 100px;
  animation: squash 1s ease-in-out infinite;
}

@keyframes squash {
  0% {
    transform: scale(1) translate(0, 0);
  }
  50% {
    transform: scale(10, 0.5) translate(0, 300px);
  }
  100% {
    transform: scale(1) translate(0, 0);
  }
}

アニメーションお助けツール

一つ一つ作っていては非効率なので、以下のバウンス作成ツールを使うとよいでしょう。 ありきたりなアニメーションではなく、テレビアニメに出てくるようなトリッキーな動きなら、このオンラインツールで簡単につくれます。 主観ですけど以下のような動きが可能です。

• road runner:びっくりして逃げるような動作
• slinky:猫が獲物を追いかけて捕まえるような動作
• swoosh:ヒーローが横から登場するかのような動き
• spin:歪みながら回転
• jelly:ゼリーのような弾力
• clock:時計の針
• splat:飛散する

.float {
  animation: float_2979 3s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes float_2979 {
  0% {
    transform: translateY(0);
  }
  33.33333% {
    transform: translateY(-6px);
  }
  66.66667% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}

WAIT! Animate イージングを細かく指定したい場合はこちらのツールが分かりやすいです。というか勉強になるので、動きを確認しながら学習したい時にいいですね。 Morf 基本的な CSS アニメーションならこちらのサイトで確認。クリックするとシンプルなソースコードが表示されます。 Animatable: One property, two values, endless possibilities こちらのツールはキーフレームをタイムランで調整しながら、プロパティの値を確認できます。 cssanimatecom アニメーションの進み具合が分からない場合は Easing Function 早見表で確認しましょう。マウスオーバーで動きが確認できます。 Chrome の開発者ツールでも確認可能です。 Ctrl+Shift+I で開発者ツールを開き、右上のメニューから More tools ＞ Animations をクリックすると右下に、アニメーションを編集するツールが開きアニメーションの再生や停止ができます。 以上、CSS3 のアニメーションでアニメっぽい動きを実現するためのツールなどでした。