Anime.js で作るサイトアニメーションの基本

Webサイトにスムーズで魅力的なアニメーションを追加したいとき、Anime.js は非常に強力な選択肢です。軽量（約17KB gzip）でありながら、CSSプロパティ、SVG、DOM属性、JavaScriptオブジェクトなど、あらゆる要素をアニメーションできます。

この記事では、Anime.js v4の基本的な使い方から、実践的なアニメーションパターンまで、実際に動くデモとともに解説します。

Anime.jsとは？

Anime.js は、Julian Garnier氏が開発した軽量なJavaScriptアニメーションライブラリです。

特徴

軽量: gzip圧縮で約17KB
シンプルなAPI: 直感的で学習コストが低い
高性能: requestAnimationFrameベースで60fps
豊富なイージング: 30種類以上の組み込みイージング関数
タイムライン: 複数アニメーションの順次・並列実行
Stagger: 複数要素への連鎖アニメーション

インストール

npm

npm install animejs

CDN

<script src="https://cdn.jsdelivr.net/npm/animejs@4/lib/anime.min.js"></script>

基本的な使い方

animate() 関数

Anime.js v4では、animate() 関数を使ってアニメーションを作成します。

import { animate } from 'animejs'
 
animate('.box', {
  x: 200,           // X軸方向に200px移動
  duration: 1000,   // 1秒間
  ease: 'outQuad',  // イージング関数
})

ポイント:

第1引数: アニメーション対象（CSSセレクタ、DOM要素、配列など）
第2引数: アニメーションオプション（プロパティと設定）

▶ 基本的なアニメーション

要素を右に200px移動

基本的な移動アニメーション

import { animate } from 'animejs'
 
animate('.box', {
  x: 200,
  duration: 1000,
  ease: 'outQuad',
  loop: true,
  alternate: true,  // 往復
})

トランスフォームアニメーション

X/Y軸の移動

斜め移動

animate('.circle', {
  x: 150,
  y: 30,
  duration: 1500,
  ease: 'inOutSine',
  loop: true,
  alternate: true,
})

▶ XY軸移動

斜め方向への移動

拡大・回転

scale と rotate を組み合わせて、ダイナミックな動きを表現できます。

拡大・回転アニメーション

animate('.box', {
  scale: [1, 1.5],   // 1倍 → 1.5倍
  rotate: 360,       // 360度回転
  duration: 2000,
  ease: 'inOutQuad',
  loop: true,
})

▶ 拡大・回転

scaleとrotateの組み合わせ

色・スタイルのアニメーション

Anime.jsはCSSプロパティもアニメーションできます。色の変化やborder-radiusなど、あらゆるスタイルに対応しています。

色と形状の変化

animate('.box', {
  backgroundColor: ['#7aa2f7', '#f7768e', '#9ece6a', '#ff9e64', '#7aa2f7'],
  borderRadius: ['8px', '50%', '8px'],
  duration: 4000,
  ease: 'inOutQuad',
  loop: true,
})

▶ 色・形状の変化

背景色とborder-radiusのアニメーション

対応するCSSプロパティ例:

backgroundColor, color
borderRadius, borderWidth
width, height
opacity
boxShadow（文字列で指定）

イージング関数

イージングはアニメーションの「緩急」を決める重要な要素です。Anime.jsには多彩なイージング関数が用意されています。

主要なイージング

イージング	説明
`linear`	一定速度
`outQuad`	最初速く、徐々に減速
`inOutQuad`	最初と最後がゆっくり
`outElastic(1, 0.5)`	弾むような動き
`outBounce`	バウンド効果

▶ イージング比較

同じ距離を異なるイージングで移動

linear

outQuad

inOutQuad

outElastic

outBounce

イージングの指定

animate('.box', {
  x: 200,
  ease: 'outElastic(1, 0.5)',  // パラメータ付きイージング
  duration: 1500,
})

v4での変更点:

v3の easing は v4では ease に名称変更
イージング名から ease プレフィックスが削除（easeOutQuad → outQuad）

Stagger（連鎖アニメーション）

複数の要素を少しずつずらしてアニメーションさせる機能です。リスト表示やグリッドアニメーションに最適です。

Staggerアニメーション

import { animate, stagger } from 'animejs'
 
animate('.item', {
  y: [-20, 20],
  opacity: [0.3, 1],
  scale: [0.8, 1],
  delay: stagger(100),  // 100msずつ遅延
  duration: 800,
  ease: 'outElastic(1, 0.5)',
  loop: true,
  alternate: true,
})

▶ Stagger（連鎖アニメーション）

複数要素を順番にアニメーション

stagger() のオプション

// グリッド配置で中央から広がるように
stagger(100, { grid: [5, 5], from: 'center' })
 
// 最後の要素から開始
stagger(100, { from: 'last' })
 
// 開始値と終了値を指定
stagger(100, { start: 0, end: 500 })

Timeline（タイムライン）

複数のアニメーションを順番に実行したい場合は、createTimeline() を使います。

タイムラインアニメーション

import { createTimeline } from 'animejs'
 
const timeline = createTimeline({ loop: true })
  .add('.box', {
    x: 200,
    duration: 500,
    ease: 'outQuad',
  })
  .add('.box', {
    y: 50,
    rotate: 180,
    duration: 500,
  })
  .add('.box', {
    x: 0,
    duration: 500,
  })
  .add('.box', {
    y: 0,
    rotate: 360,
    duration: 500,
  })

▶ Timeline（シーケンスアニメーション）

複数のアニメーションを順番に実行

1→4

タイムラインの制御

// 一時停止
timeline.pause()
 
// 再生
timeline.play()
 
// 最初から
timeline.restart()
 
// 逆再生
timeline.reverse()

ループアニメーション

サイトのアクセント要素として、無限ループするアニメーションを作成できます。

ループアニメーションの例

// パルスアニメーション
animate('.pulse', {
  scale: [1, 1.3],
  opacity: [1, 0.6],
  duration: 800,
  ease: 'inOutQuad',
  loop: true,
  alternate: true,  // 往復
})
 
// 回転アニメーション
animate('.spin', {
  rotate: 360,
  duration: 2000,
  ease: 'linear',
  loop: true,       // 無限ループ
})

▶ ループアニメーション

loop: true と alternate で無限ループ

Pulse

Bounce

↻

Spin

実践Tips

1. アニメーションの停止

コンポーネントのアンマウント時には、アニメーションを停止することを忘れずに。

const animation = animate('.box', { x: 200, loop: true })
 
// クリーンアップ
animation.pause()

2. 初期値の指定

from を使って初期値を明示的に指定できます。

animate('.box', {
  x: { from: -100, to: 100 },
  opacity: { from: 0 },  // 0から現在値へ
})

3. 配列でキーフレーム

配列を使って複数の値を順番にアニメーションできます。

animate('.box', {
  scale: [1, 1.5, 0.8, 1],  // 順番にアニメーション
  duration: 2000,
})

4. コールバック関数

アニメーションの開始・終了時に処理を実行できます。

animate('.box', {
  x: 200,
  onBegin: () => console.log('開始'),
  onComplete: () => console.log('完了'),
})

まとめ

Anime.jsを使えば、シンプルなコードで洗練されたアニメーションを実装できます。

機能	用途
`animate()`	基本的なアニメーション
`stagger()`	複数要素の連鎖アニメーション
`createTimeline()`	シーケンスアニメーション
イージング	動きの緩急を表現

ぜひ自分のプロジェクトで試してみてください！