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

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

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

エンジニア速報は Twitter の@commteで配信しています。

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

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

The illusion of life from cento lodigiani on Vimeo.

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, .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

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

Morf

基本的なCSSアニメーションならこちらのサイトで確認。クリックするとシンプルなソースコードが表示されます。

Animatable: One property, two values, endless possibilities

こちらのツールはキーフレームをタイムランで調整しながら、プロパティの値を確認できます。

cssanimatecom

アニメーションの進み具合が分からない場合は

Easing Function 早見表で確認しましょう。マウスオーバーで動きが確認できます。

Chromeの開発者ツールでも確認可能です。

Ctrl+Shift+Iで開発者ツールを開き、右上のメニューからMore tools＞Animationsをクリックすると右下に、アニメーションを編集するツールが開きアニメーションの再生や停止ができます。

以上、CSS3のアニメーションでアニメっぽい動きを実現するためのツールなどでした。