CSS3のアニメーションで「ふわふわ」「ゆらゆら」させる方法や便利なオンラインツール

作成：2016/12/5
更新：2016/12/05
Tool

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

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

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

The illusion of life from cento lodigiani on Vimeo.

THE ILLUSION OF LIFE

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

<a href="http://commte.net/blog/archives/5082" target="_blank">ここまで動かせる！楽しいcss アニメーションのサンプル集 | コムテブログ</a>

基本

See the Pen <a href="http://codepen.io/commte/pen/a016ec36211130f2fbcc7769f2b64202/">fluffy</a> by commte (<a href="http://codepen.io/commte">@commte</a>) on <a href="http://codepen.io">CodePen</a>.<br />

以下のように、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に変更すると横にふわふわ動きます。

See the Pen <a href="http://codepen.io/commte/pen/c4d0089e59d57a2414b40df3b4b586f1/">fluffy X</a> by commte (<a href="http://codepen.io/commte">@commte</a>) on <a href="http://codepen.io">CodePen</a>.<br />

スカッシュ＆ストレッチ

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

See the Pen <a href='http://codepen.io/commte/pen/e7020619fb9589c6510435cb45cbe788/'>Squash&Stretch</a> by commte (<a href='http://codepen.io/commte'>@commte</a>) on <a href='http://codepen.io'>CodePen</a>.<br />

.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, .5) translate(0, 300px);}
  100% {transform: scale(1) translate(0, 0);}
}

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

一つ一つ作っていては非効率なので、以下のバウンス作成ツールを使うとよいでしょう。

ありきたりなアニメーションではなく、テレビアニメに出てくるようなトリッキーな動きなら、このオンラインツールで簡単につくれます。

主観ですけど以下のような動きが可能です。

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

サイドバーからアニメーションの種類を選び、ループボタンとPLAY ANIMATIONを押すとアニメーションのソースコードを出力してくれます。

Bouncejs

シンプルなアニメーションならこのツールでhtmlとCSSを吐き出してくれます。

CSS Animation Generator

FLOATを選ぶだけで「ふわふわ」のアニメーションが出来上がります。あとは出力されたCSSをコピペするだけです。とっても簡単ですね！出力されたCSSは以下、短くて分かりやすいです。

.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

イージングを細かく指定したい場合はこちらのツールが分かりやすいです。というか勉強になるので、動きを確認しながら学習したい時にいいですね。