Zum Inhalt springen
DE

144 Icons · interaction="hover-replay"

Animierte Icons mit Hover-Replay

Diese Icons spielen einmal ab, wenn der Mauszeiger sie erreicht, und laufen dann von selbst zu Ende. So wird aus dem schnellen Überfahren einer Toolbar kein nervöses Gezappel. Die meisten Icons der Sammlung funktionieren so: Pfeile, Dateien, Geräte, Wetter- und Marken-Icons, die bei Hover lebendig werden.

Alle Icons mit Hover-Replay

So verhält es sich

Spielt bei mouseenter einmal ab, außer bei reduzierter Bewegung. Verlassen stoppt die Animation nicht, und erneutes Betreten während der Wiedergabe startet sie nicht neu.

Ist reduzierte Bewegung eingestellt, spielt Hover die Animation nicht ab. Tippen auf Touchscreens startet keine Hover-Animation; der Tastaturfokus dagegen schon, wenn das Icon in einem fokussierbaren Element steckt. All das übernimmt die React-Komponente, Sie wählen nur das Icon aus.

Einsatzmöglichkeiten

  • Feature-Listen und Preistabellen
  • Pfeil-Links und Call-to-Action-Buttons
  • Toolbar-Buttons in Editoren und Dashboards
  • Karten im Raster einer Landingpage
  • Links im Footer und zum Kontakt

Nach Kategorie

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

  • Aktionen · 6

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

  • Inhalte · 10

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

  • Medien · 11

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

  • Textbearbeitung · 2

    Hash, List

  • Kommunikation · 9

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

  • Geräte · 10

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

  • Wetter · 13

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

  • Karten & Standort · 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

  • Diagramme · 5

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

  • Entwicklung · 8

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

  • Design & Layout · 7

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

  • Formen & Mathematik · 8

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

  • Social Media · 9

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

  • Sonstige · 6

    Clock, Coffee, Frown, Meh, Smile, Tool

In React verwenden

Die hier aufgeführten Icons spielen diese Interaktion standardmäßig ab. Jedes andere Icon kann sie ebenfalls nutzen: Übergeben Sie dazu das Prop interaction.

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

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

Lassen Sie die ganze Karte oder den ganzen Link auf Hover reagieren, nicht nur das Icon: Mit dem render-Prop landen die Events auf Ihrem Element, und auch der Tastaturfokus spielt die Animation ab.

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

<UseAnimations
  animation={trendingUp}
  render={(eventProps, animationProps) => (
    <a href="/reports" className="card" {...eventProps}>
      <span {...animationProps} /> Wöchentliches Wachstum
    </a>
  )}
/>

Alle Props stehen in der Dokumentation. Außerhalb von React sind die Icons Lottie-JSON-Dateien; unter Lottie-Icons sehen Sie, wie Sie die Interaktionen mit lottie-web nachbauen.

Häufige Fragen

Welche Icons nutzen die Interaktion „Hover-Replay“?

144 Icons: 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 und 129 weitere. Icons mit Hover-Replay beleben typischerweise Pfeil-Links, Feature-Listen, Toolbar-Buttons und Karten auf Landingpages.

Was passiert, wenn reduzierte Bewegung eingestellt ist?

Ist reduzierte Bewegung eingestellt, spielt Hover die Animation nicht ab. Die React-Komponente liest prefers-reduced-motion aus und reagiert, sobald sich die Einstellung ändert. Sie brauchen dafür keinen eigenen Code.

Wie ändere ich die Interaktion eines Icons?

Jedes Icon spielt die Interaktion ab, für die es gestaltet wurde. Mit interaction="hover-replay" bekommt jedes andere Icon dieses Verhalten, mit einem anderen Wert ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') ein anderes. Die Props autoplay, loop und speed steuern die Wiedergabe.