anime.js Demo

1. 基本アニメーション（回転 + スケール）

3秒ごとに回転 + スケーリング。easeInOutQuad のイージング。

2. Stagger交互（アイテムが順番にバウンス）

150ms の遅延で各アイテムが順番にバウンスします。

3. 横スライドアニメーション

左右に 100px ずつ移動するスムーズなアニメーション。

4. Motion Path（パス上を移動）

SVG パス上を滑らかに移動するアニメーション。

5. Timeline（複雑な順序付け）

複数のアニメが同時・順序付けで実行される。移動→回転→スケール→リセット。

6. カラーグラデーション変形

グラデーションが連続的に色が変わる。複数カラーのアニメーション。

7. パルス波紋効果

中心から波紋が広がるようなパルスアニメーション。

8. コード例

import anime from 'animejs';

// Motion Path
anime({
  targets: '.element',
  motionPath: [
    { path: [[0, 0], [150, -50], [300, 0]] }
  ],
  duration: 2000,
});

// Timeline複雑順序付け
const timeline = anime.timeline({ loop: true });
timeline
  .add({ targets: '.box', translateX: 100 }, 0)
  .add({ targets: '.box', rotate: 180 }, 300)
  .add({ targets: '.box', scale: 1.2 }, 400)
  .add({ targets: '.box', translateX: 0 }, 600);

// スピードコントロール
const anim = anime({ targets: '.box', scale: 2 });
anim.speed = 0.5;  // 半速
anim.restart();    // 再開

// カラーアニメーション
anime({
  targets: '.box',
  background: ['#ec4899', '#06b6d4', '#10b981'],
  duration: 3000,
  loop: true,
});