anime について
JavaScript アニメーション開発者向けの Anime.js v4.3.5 リファレンススキルです。DOM、SVG、テキスト、スクロール、レイアウトの基本から応用までを扱います。
主な機能
- 01アニメーションのタイムラインとスタッガー
- 02ドラッグ可能な要素とアニメータブルオブジェクト
- 03スクロール連動とレイアウトアニメーション
- 04SVG のモーフィング、描画、パス移動
- 05テキスト分割とアニメーション
- 06イージング、合成、WAAPI
活用シーン
- 01順次再生やスタッガー再生の UI アニメーション構築
- 02スクロール連動やレイアウト遷移の追加
- 03SVG パスやテキストのアニメーション作成
- 04Anime.js v4.3.5 の API トピック確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/animeを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
GENERATION.mdreferences/advanced-composition.mdadvanced-engine.mdadvanced-scope.mdadvanced-waapi.mdcore-animation.mdcore-parameters.mdcore-stagger.mdcore-timeline.mdcore-timer.mdeasings-custom.mdeasings-functions.mdfeatures-animatable.mdfeatures-draggable-config.mdfeatures-draggable.mdfeatures-layout.mdfeatures-scope.mdfeatures-scroll.mdfeatures-svg-draw.mdfeatures-svg-morph.mdfeatures-svg-motion-path.mdfeatures-text-animation.mdfeatures-text-split.mdutils-helpers.md詳細
Anime.jsは、高速で多目的に使える軽量なJavaScriptアニメーションライブラリです。シンプルながら強力なAPIを備えています。CSSプロパティ、SVG、DOM属性、JavaScriptオブジェクトに対応しています。バージョン4では、ESモジュールを使ったモジュール型アーキテクチャ、パフォーマンスの向上、ドラッグ操作、アニメーション可能なオブジェクト、高度なタイムライン制御などの機能強化が導入されています。
このスキルはAnime.js v4.3.5をベースにしており、2026-01-29に生成されました。
コアリファレンス
| トピック | 説明 | リファレンス |
|---|---|---|
| アニメーション | 基本的なアニメーション関数、ターゲットの選択、プロパティのアニメーション | core-animation |
| タイムライン | 順次および並列のアニメーション、ラベル、位置制御 | core-timeline |
| スタガー | 複数のターゲットに対するスタガーアニメーション | core-stagger |
| アニメーションパラメーター | 継続時間、遅延、イージング、ループ、コールバック | core-parameters |
| タイマー | createTimer、Timer — 周期的なコールバック、frameRate、再生 | core-timer |
機能
ドラッグ可能
| トピック | 説明 | リファレンス |
|---|---|---|
| ドラッグ可能 | 物理特性と制約を備えたドラッグ可能な要素を作成します | features-draggable |
| ドラッグ可能の設定 | コンテナーの境界、スナップ、摩擦、速度 | features-draggable-config |
アニメーション可能
| トピック | 説明 | リファレンス |
|---|---|---|
| アニメーション可能 | カスタムアニメーション用のアニメーション可能なオブジェクトを作成します | features-animatable |
スコープとスクロール
| トピック | 説明 | リファレンス |
|---|---|---|
| スコープ | スクロールベースのアニメーションとビューポートの検出 | features-scope |
| スクロール（onScroll） | スクロール連動アニメーション、進行状況、link(timeline) | features-scroll |
レイアウト
| トピック | 説明 | リファレンス |
|---|---|---|
| レイアウト（AutoLayout） | FLIPスタイルのレイアウトアニメーション、アコーディオン、表示／非表示 | features-layout |
SVG
| トピック | 説明 | リファレンス |
|---|---|---|
| SVGモーフィング | SVGのパスと図形をモーフィングします | features-svg-morph |
| SVG描画 | SVGパスの描画をアニメーション化します | features-svg-draw |
| SVGモーションパス | SVGパスに沿った要素の動きをアニメーション化します | features-svg-motion-path |
テキスト
| トピック | 説明 | リファレンス |
|---|---|---|
| テキスト分割 | テキストを単語、行、文字に分割します | features-text-split |
| テキストアニメーション | テキストの内容とプロパティをアニメーション化します | features-text-animation |
イージング
| トピック | 説明 | リファレンス |
|---|---|---|
| イージング関数 | 組み込みのイージング関数（in、out、inOut） | easings-functions |
| カスタムイージング | 3次ベジェ、スプリング、ステップ、リニアのイージング | easings-custom |
ユーティリティ
| トピック | 説明 | リファレンス |
|---|---|---|
| ユーティリティ | DOMユーティリティ、値のヘルパー、数学関数 | utils-helpers |
高度なトピック
| トピック | 説明 | リファレンス |
|---|---|---|
| 合成 | 重複するアニメーションの置き換え、なし、ブレンド（加算） | advanced-composition |
| エンジン | グローバルエンジン — 一時停止、再開、速度、timeUnit、precision | advanced-engine |
| WAAPI | Web Animations API — ネイティブアニメーション用の waapi.animate | advanced-waapi |
| スコープ（createScope） | 実行コンテキスト、デフォルト、メソッド、keepTime、revert | advanced-scope |
コメント
Markdown 対応