お気に入り

CSS3 Animation Cheat Sheet(CSS3アニメーションチートシート)

CSS3 Animation Cheat Sheet(CSS3アニメーションチートシート)

CSS3で作れるアニメーションの動きを簡単に実装できるチートシートです。
チートシートという名称ですが、実際はページ内に外部CSSを加えclass等を調整するだけで任意のアニメーションが実装できる代物です。
アニメーションのデモも確認でき、解説も丁寧なので使いやすいサイトです。

アニメーションデモ

CSS3 Animation Cheat Sheet(CSS3アニメーションチートシート)デモ1

トップページでは、アニメーションのデモを見ることができます。
ボタンをクリックすればそれぞれの動きが確認できます。
また、ボタンの名前がCSSで利用するclass名にもなっています。

CSS3 Animation Cheat Sheet(CSS3アニメーションチートシート)デモ2

また、実用例を踏まえたデモアニメーションも見られるので、実装のイメージが湧きやすくなっています。
➡デモページを見る

使い方

CSS3 Animation Cheat Sheet(CSS3アニメーションチートシート)使い方

CSS3 Animation Cheat Sheet(CSS3アニメーションチートシート)の使い方は、トップページ下に丁寧に解説されています。
chromeブラウザなどで翻訳するだけで十分理解できる内容になっています。

要約するとこんな感じです。

  • ①animations.cssをダウンロードする
  • ② <head>を書き換えてcssを読み込ませる
  • ③cssに目的のアニメーションのclassを追加する
  • ※エフェクトを追加する場合はjQuery を使用する

PR

無料デザインテンプレートなら【デザインAC】
無料イラスト素材【イラストAC】