本文へスキップ
JA

144 個のアイコン · interaction="hover-replay"

ホバーで再生するアニメーションアイコン

ポインターが乗ると 1 回再生し、そのまま最後まで再生しきるアイコンです。ツールバーの上をすばやく横切っても、動きがガタつきません。矢印、ファイル、デバイス、天気、ブランドのアイコンなど、セットの大半がこの動きで、ホバーすると動き出します。

「ホバーで再生」のアイコン一覧

動作

モーション軽減が有効でなければ、mouseenter で 1 回再生します。離れても止まらず、再生中にもう一度乗っても最初からにはなりません。

モーション軽減が有効な場合、ホバーしてもアニメーションは再生されません。タッチスクリーンでのタップではホバーアニメーションは始まりません。アイコンがフォーカス可能な要素の中にあれば、キーボードフォーカスでも再生されます。これらはすべて React コンポーネントが処理するので、アイコンを選ぶだけで済みます。

使いどころ

  • 機能一覧や料金表
  • 矢印付きのリンクや CTA ボタン
  • エディターやダッシュボードのツールバーボタン
  • ランディングページのグリッドに並ぶカード
  • フッターやお問い合わせへのリンク

カテゴリ別

  • ナビゲーション · 22

    Arrow Down Left, Arrow Down Right, Arrow Left, Arrow Right, Arrow Up Left, Arrow Up Right, Chevron Down, Chevron Up, Chevrons Down, Chevrons Left, Chevrons Right, Chevrons Up, Corner Down Left, Corner Down Right, Corner Left Down, Corner Left Up, Corner Right Down, Corner Right Up, Corner Up Left, Corner Up Right, External Link, Sidebar

  • アクション · 6

    Award, Key, Maximize 2, Minimize 2, Shield, Slash

  • コンテンツ · 10

    Book, Book Open, Clipboard, File, File Text, Image, Inbox, Paperclip, User, Users

  • メディア · 11

    Aperture, Cast, Disc, Fast Forward, Film, Headphones, Music, Radio, Rewind, Speaker, TV

  • テキスト編集 · 2

    Hash, List

  • コミュニケーション · 9

    At Sign, Message Circle, Message Square, Phone Forwarded, Phone Incoming, Phone Missed, Phone Outgoing, RSS, Voicemail

  • デバイス · 10

    Battery, Battery Charging, Bluetooth, CPU, Hard Drive, Monitor, Smartphone, Tablet, Watch, WiFi

  • 天気 · 13

    Cloud Drizzle, Cloud Lightning, Cloud Rain, Cloud Snow, Droplet, Moon, Sun, Sunrise, Sunset, Thermometer, Umbrella, Wind, Zap

  • 地図・位置情報 · 8

    Anchor, Crosshair, Life Buoy, Map, Map Pin, Navigation, Navigation 2, Target

  • EC・ショッピング · 10

    Box, Briefcase, Credit Card, Dollar Sign, Gift, Package, Percent, Shopping Bag, Tag, Truck

  • グラフ · 5

    Bar Chart, Bar Chart 2, Pie Chart, Trending Down, Trending Up

  • 開発 · 8

    Code, Command, Database, Git Branch, Git Commit, Git Merge, Git Pull Request, Server

  • デザイン・レイアウト · 7

    Columns, Grid, Layers, Layout, Move, Pen Tool, Table

  • 図形・数学 · 8

    Circle, Divide, Divide Circle, Divide Square, Hexagon, Octagon, Square, Triangle

  • SNS · 9

    Chrome, Codesandbox, Figma, Framer, GitLab, Slack, Trello, Twitch, Twitter X

  • その他 · 6

    Clock, Coffee, Frown, Meh, Smile, Tool

React で使う

ここに並ぶアイコンは、デフォルトでこのインタラクションで再生されます。ほかのアイコンでも interaction prop を渡せば同じ動きにできます。

import UseAnimations from 'react-useanimations';
import settings from 'react-useanimations/lib/settings';

// Settings の本来のインタラクションは 'hover'
<UseAnimations animation={settings} interaction="hover-replay" size={32} />

アイコンだけでなく、カードやリンク全体でホバーを受けましょう。render prop を使うとイベントが自分の要素に付き、キーボードフォーカスでもアニメーションが再生されます。

import trendingUp from 'react-useanimations/lib/trendingUp';

<UseAnimations
  animation={trendingUp}
  render={(eventProps, animationProps) => (
    <a href="/reports" className="card" {...eventProps}>
      <span {...animationProps} /> 週間の伸び
    </a>
  )}
/>

すべての props はドキュメントにまとめています。React 以外では、アイコンは Lottie JSON ファイルです。lottie-web でインタラクションを再現する方法は Lottie アイコンを参照してください。

よくある質問

「ホバーで再生」のインタラクションを使うアイコンは？

144 個あります。Arrow Down Left、Arrow Down Right、Arrow Left、Arrow Right、Arrow Up Left、Arrow Up Right、Chevron Down、Chevron Up、Chevrons Down、Chevrons Left、Chevrons Right、Chevrons Up、Corner Down Left、Corner Down Right、Corner Left Down ほか 129 個です。ホバーで再生するアイコンは、矢印付きリンク、機能一覧、ツールバーボタン、ランディングページのカードに動きを添えるのによく使われます。

ユーザーがモーション軽減を設定している場合はどうなりますか？

モーション軽減が有効な場合、ホバーしてもアニメーションは再生されません。React コンポーネントが prefers-reduced-motion を読み取り、設定が変わればそれに追従するので、そのためのコードを書く必要はありません。

アイコンのインタラクションを変えるには？

どのアイコンも、デザインされたときのインタラクションで再生されます。interaction="hover-replay" を渡せばほかのアイコンにもこの動きを付けられ、別の値（'loop'、'click-toggle'、'click-replay'、'hover'、'hover-loop'、'hover-replay'）を渡せば別の動きに変えられます。再生は autoplay、loop、speed の props で調整できます。