Skip to content

Web アニメーションライブラリ チートシート

JavaScript アニメーションライブラリ

GSAP

業界をリードする高性能なアニメーションライブラリ。CSS プロパティ、SVG、Canvas などをサポートし、React や Vue などのフレームワークとシームレスに連携できます。

  • 特徴: 高性能、使いやすさ、強力な機能、タイムラインのサポート

  • インストール: npm install gsap

  • 使用方法:

    import { gsap } from "gsap";

gsap.to(".box", { duration: 2, x: 100 });

Anime.js

軽量な JavaScript アニメーションライブラリ。CSS プロパティ、SVG、DOM プロパティ、JavaScript オブジェクトのアニメーションをサポートしています。

  • 特徴: シンプルで使いやすい、軽量、多様なアニメーションタイプをサポート

  • インストール: npm install animejs

  • 使用方法:

    import anime from 'animejs/lib/anime.es.js';

anime({
  targets: '.box',
  translateX: 250,
  duration: 2000
});

Velocity.js

jQuery の使いやすさと CSS の高性能を兼ね備えたアニメーションライブラリ。アニメーションキューとコンテキスト要素をサポートしています。

  • 特徴: アニメーションキュー、コンテキスト要素、使いやすさ

  • インストール: npm install velocity-animate

  • 使用方法:

    import velocity from 'velocity-animate';

velocity(document.querySelector(".box"), { translateX: 250 }, { duration: 2000 });

CSS アニメーションライブラリ

Animate.css

豊富なアニメーション効果を備えた CSS アニメーションライブラリ。クラス名を追加するだけでアニメーションを実現できます。

  • 特徴: 豊富なアニメーション効果、使いやすさ、優れた互換性

  • インストール: npm install animate.css --save

  • 使用方法:

    <link rel="stylesheet" href="animate.css">
<div class="animated bounce">Hello World!</div>

Hover.css

CSS3 のみで実装されたボタンホバーエフェクトライブラリ。多様なホバーエフェクトが含まれています。

  • 特徴: 豊富なエフェクト、CSS3 のみで実装、使いやすさ

  • インストール: npm install hover.css

  • 使用方法:

    <link rel="stylesheet" href="hover.css">
<a class="hvr-grow">Grow</a>

CSShake

シェイクや揺れなどの効果を作成するための CSS3 アニメーションクラスセット。

  • 特徴: ユニークなアニメーション効果、CSS3 のみで実装、使いやすさ

  • インストール: npm install csshake

  • 使用方法:

    <link rel="stylesheet" href="csshake.css">
<div class="shake-little">Shake it!</div>