CSSだけでアニメーションを実装したい時の参考サイトまとめ

CSSだけでアニメーションを作ろうとすると何かと面倒になりがちです。

慣れていない人からするとアニメーションを作ることすら一苦労です。

なので今回はCSSでアニメーションを作る際に参考になりそうなサイトをざっくりまとめました。

 

アニメーションの基本的な動き12

以下のサイトにはディズニーが開発したアニメーションの基本原則12がまとめられています。

THE ILLUSION OF LIFE

アニメーション自体はCSSだけでも実現可能です。

思ったより動きのあるアニメーションが作れて少し驚きですが、サイトに取り入れればかなりのアクセントになること間違いなしですね。

 

アニメーションを実装するCSS

ここからは実際にアニメーションを実装するCSSコードをみていきます。

 

上下のフワフワ感

まずは「上下のフワフワ感」をだすCSSです。

HTML

<div class="fluffy"></div>

 

CSS

.fluffy {
  background: #000;
  width: 100px;
  height: 100px;
  margin: 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) }
}

 

@keyframesでアニメーションを作成し、transform: translateYで上下に移動することでフワフワ感を演出しています。

アニメーションを無限リピートにするためにanimationプロパティにはinfinateを指定しておきましょう。

 

左右に移動

上で解説した上下のフワフワ感の横バージョンです。

transform: translateYをtranslateXに変更しただけですね。

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

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

 

スカッシュとストレッチ

アニメーションの基本的な動き12で紹介した「潰れて伸びながらバウンドする」という動きです。見ていない人はぜひ確認してみてください。

これをCSSで作るにはscaleをtranslateを組み合わせればokです。

HTML

<div class="type-textbound"></div>

 

CSS

.type-textbound {
  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);}
}

 

こちらも無限リピートにするのでanimateプロパティにinfinateを指定しておきましょう。

また、イージングもease-in-outにすることでより臨場感が生まれます。他のイージングに変更しても面白いかもしれません。

 

アニメーション作成時の便利ツール

とはいえ、やはり一から全てCSSを記述するとなるとやはり面倒です。

そこでCSSでのアニメーション作成を助けてくれる便利ツールがあります。

アニメーションを作るならこういったツールを積極的に使っていきたいですね。

 

Bounce.js

Bounce.js

名前にjsとはいっていますが、CSSだけでもアニメーションの作成が可能です。

画面左側の「SELECT PRESET」をクリックするとアニメーションを選択できます。割とよく見かけるアニメーションが多いかなという印象です。

CSSコードを表示したい場合は、中央右上にある「EXPORT CSS」をクリックするとえげつない量のCSSコードが表示されます。使う場合はそのままコピペしてしまいましょう。

 

CSS Animation Generator

CSS Animation Generator

ログインが必要ですが、こちらもある程度決まり切ったアニメーションを簡単に実現させることができるサイトです。

アニメーションを選択して、表示されるCSSをコピペするだけ。簡単ですね。

コードも割とわかりやすいんじゃないかなと思います。

 

WAIT! Animate

WAIT! Animate

こちらはより直感的にわかりやすくアニメーションを表現することができるサイトです。

アニメーションの種類があらかじめ用意されているので、好きなものを選択するとアニメーションが始まります。

CSSも同時に出力されるので、持って帰りましょう。

 

Morf

Morf

このサイトはアニメーションというよりはイージングについて参考になるサイトです。

イージングを指定すると、その通りにボックスがアニメーションしてくれます。

イージングの種類を確認できる他、下にはCSSコードも出力されているのでそのままCSSコードをコピペすることも可能です。

動きがとてもわかりやすいのでイージングについて理解が深まると思います。

 

Animatable

Animatable: One property, two values, endless possibilities

こちらはjQuery顔負けの本格的なアニメーションをCSSだけで実現しているサンプルが置いてあるサイトです。

正直かなりレベルが高いというか、「jQuery使ったほうが簡単なんじゃね?」って感じがします笑

それくらい面白い動きをしてくれます。

ボックスをクリックするとCSSが表示されるので気になったら確認してみましょう。

それにしても見ているだけで面白いです。CSSだけでここまでできるとは僕自身考えていませんでした。

 

cssanimatecom

cssanimatecom

こちらは自分でタイムラインを調整しながらアニメーションの変化具合をリアルタイムで見ることができるサイトです。

具体的な数値も入力可能なので、色々試してみると面白いですね。

 

easings.net

easings.net

こちらはイージングの種類と変化の具合を確認できるサイトです。

(多分)全てのイージングについて解説してあり、マウスオーバーで変化や緩急を確認することができます。

CSSだけでなく、jQueryやJavaScriptのイージングを決めたい場合にもかなり役立つでしょう。

 

まとめ

以上CSSでアニメーションを作る際に参考になるサイトまとめでした。

CSSで一からアニメーションを作るのはやはりそれなりに大変なことです。より複雑なアニメーションを実装しようとすればさらに大変でしょう。

そんな時はここで紹介したようなページやサービスをぜひ活用してください。

アニメーション作成の手助けになるだけでなく、新たなアイディアまで提供してくれるはずです。