animation-micro-interaction-pack について
UI の設計や開発に使えるアニメーションとマイクロインタラクションのパターン集です。ホバー、表示・退場、ローディング、ジェスチャーの例と、性能やモーション低減設定への配慮を紹介します。
主な機能
- 01ホバー状態のアニメーション
- 02要素の表示・退場エフェクト
- 03ローディングアニメーションのパターン
- 04クリック・ドラッグ・スワイプの反応
- 05Tailwind アニメーション設定例
- 06性能とモーション低減設定への配慮
活用シーン
- 01ボタンにホバーや押下時の反応を追加
- 02リストに順次表示エフェクトを作成
- 03スケルトン表示や進捗インジケーターを制作
- 04モーション低減設定に合わせてアニメーションを調整
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/animation-micro-interaction-packを入力して読み込まれたか確認します。
詳細
アニメーションとマイクロインタラクションのパック
洗練された高パフォーマンスのアニメーションとマイクロインタラクションを作成します。
アニメーションのパターン
ホバーエフェクト：拡大、浮き上がり（translateY）、光彩（box-shadow）、色の変化 表示：フェードイン、スライドイン、リスト項目を順に表示するズームイン 終了：フェードアウト、スライドアウト、縮小して終了 読み込み：パルス、スケルトンの波、プログレスバー ジェスチャー：クリック時の波紋、ドラッグ時のフィードバック、スワイプインジケーター
Tailwind のアニメーション
/* tailwind.config.js */
animation: {
'fade-in': 'fadeIn 0.5s ease-out',
'slide-up': 'slideUp 0.3s ease-out',
'scale-in': 'scaleIn 0.2s ease-out',
}
Framer Motion の例
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
/>
ベストプラクティス
マイクロインタラクションには200～300msを使用し、prefers-reduced-motionを尊重します。パフォーマンスのためにtransformやopacityをアニメーションさせ、イージング関数を追加し、リスト項目を順に表示して、ホバー時とアクティブ時の状態を用意します。
コメント
Markdown 対応