よく使う動き
WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。 その中でも特に勉強になったコードを紹介します。 コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。 あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！
CSSアニメーションライブラリ
Animate.cssという様々な動きのパターンを集めたCSSライブラリを使って出現するスピードや形を調整し、オリジナルの動きをつくってみました！ Animate.css | A cross-browser library of CSS animations.
作ってみた１３種類のアニメーション
ふわっ
パタッ
くるっ
ボンッ
ヒュッ
じわっ
にゅーん
スーッ
シャッ
順番に現れる（CSS）
ランダムに現れる（CSS）
順番に現れる（CSS×JS）
ランダムに現れる（CSS×JS）
その他のCSSアニメーションライブラリ
上記で紹介したアニメーション（Animate.css）の他に、さまざまな動きをまとめたCSSアニメーションライブラリを５つご紹介します。
Vivify
CSS3で書かれた６０種類以上のアニメーションまとめたライブラリです。 Vivify – CSS Animation Library
ALL ANIMATION CSS3
CSS3で書かれた３０種類以上のアニメーションまとめたライブラリです。 ALL ANIMATION CSS3
WAIT! Animate
一定時間をおきながらアニメーションをループしたい時に直感的にコードを生成してくれるジェネレータです。 WAIT! Animate
CSS Animations Generator
動きを画面で確認して『Show CSSCode』ボタンを押すとコードを生成してくれるジェネレータ。 CSS Animations Generator
Animista
動きを画面内で生成し、右上にある『{・}』マークを押すとコードを生成してくれるジェネレータ。
Animista – CSS Animations on Demand
次回の予定
ファーストビューにインパクトを持たせたい時、サイト全体の空気感を伝えたいときに活躍する「動く背景」に挑戦してみます ＼＼\\٩( ‘ω’ )و //／／
