Langsung ke konten
ID

144 ikon · interaction="hover-replay"

Ikon animasi yang diputar saat hover

Ikon ini diputar sekali saat pointer masuk dan selesai dengan sendirinya, sehingga kursor yang melintas cepat di atas toolbar tidak menghasilkan gerakan yang patah-patah. Sebagian besar ikon di koleksi ini bekerja dengan cara ini: panah, file, perangkat, cuaca, dan ikon merek yang menjadi hidup saat di-hover.

Semua ikon dengan interaksi putar sekali saat hover

Cara kerjanya

Diputar sekali saat mouseenter, kecuali jika reduced motion dipilih. Keluar dari ikon tidak menghentikannya, dan masuk lagi selama animasi berjalan tidak memulainya ulang.

Jika pengguna memilih reduced motion, hover tidak memutar animasinya. Ketukan di layar sentuh tidak memulai animasi hover, sedangkan fokus keyboard memulainya jika ikon berada di dalam elemen yang bisa difokus. Komponen React menangani semua ini; Anda cukup memilih ikonnya.

Tempat memakainya

  • Daftar fitur dan tabel harga
  • Tautan panah dan tombol call-to-action
  • Tombol toolbar di editor dan dashboard
  • Kartu di grid landing page
  • Tautan footer dan kontak

Berdasarkan kategori

  • Navigasi · 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

  • Aksi · 6

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

  • Konten · 10

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

  • Media · 11

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

  • Pengeditan teks · 2

    Hash, List

  • Komunikasi · 9

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

  • Perangkat · 10

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

  • Cuaca · 13

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

  • Peta & lokasi · 8

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

  • E-commerce · 10

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

  • Grafik · 5

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

  • Pengembangan · 8

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

  • Desain & tata letak · 7

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

  • Bentuk & matematika · 8

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

  • Media sosial · 9

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

  • Lainnya · 6

    Clock, Coffee, Frown, Meh, Smile, Tool

Pakai di React

Ikon yang tercantum di sini menjalankan interaksi ini secara default. Ikon lain pun bisa memakainya: cukup berikan prop interaction.

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

// Settings biasanya memakai 'hover'
<UseAnimations animation={settings} interaction="hover-replay" size={32} />

Jadikan seluruh kartu atau tautan sebagai area hover, bukan hanya ikonnya: dengan render prop, event dipasang di elemen Anda, dan fokus keyboard juga memutar animasinya.

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

<UseAnimations
  animation={trendingUp}
  render={(eventProps, animationProps) => (
    <a href="/reports" className="card" {...eventProps}>
      <span {...animationProps} /> Pertumbuhan mingguan
    </a>
  )}
/>

Semua props dijelaskan di dokumentasi. Di luar React, ikon-ikon ini adalah file Lottie JSON; halaman Ikon Lottie menunjukkan cara membuat ulang interaksinya dengan lottie-web.

FAQ

Ikon mana saja yang memakai interaksi putar sekali saat hover?

144 ikon: 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, dan 129 lainnya. Ikon yang diputar saat hover biasanya menghidupkan tautan panah, daftar fitur, tombol toolbar, dan kartu landing page.

Apa yang terjadi jika pengguna memilih reduced motion?

Jika pengguna memilih reduced motion, hover tidak memutar animasinya. Komponen React membaca prefers-reduced-motion dan ikut menyesuaikan saat pengaturannya berubah, jadi Anda tidak perlu menulis kode apa pun untuk itu.

Bagaimana cara mengganti interaksi sebuah ikon?

Setiap ikon menjalankan interaksi yang memang dirancang untuknya. Berikan interaction="hover-replay" agar ikon lain berperilaku seperti ini, atau nilai lain ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') untuk menggantinya. Props autoplay, loop, dan speed mengatur pemutarannya.