Übergänge sind eine Grundform der CSS-Animation, mit der Sie schöne Effekte erstellen können.

Die zentralen Thesen

  • CSS-Übergänge ändern Eigenschaftswerte reibungslos, verleihen Webelementen Feedback und visuelle Attraktivität und verbessern das Benutzererlebnis.
  • Übergangseigenschaften wie „transition-property“, „transition-duration“, „transition-timing-function“ und „transition-delay“ sind entscheidend für die Steuerung des Verhaltens und des Timings von Übergängen.
  • Anfänger sollten mit einfachen Übergängen beginnen, das Boxmodell verstehen, Übergänge vorher planen, Optimieren Sie die Leistung, berücksichtigen Sie die Barrierefreiheit und nutzen Sie die Entwicklertools von Chrome für eine nahtlose Nutzung Entwicklung.

Die Erstellung außergewöhnlicher Websites erfordert ein Gleichgewicht zwischen einer ansprechenden Benutzeroberfläche und ansprechenden Interaktionen. Diese Interaktionen spielen eine wichtige Rolle bei der Gestaltung des Benutzererlebnisses. Als Entwickler greifen Sie häufig auf verschiedene Methoden zurück, um dies zu erreichen. Unter ihnen sind CSS-Übergänge eine der einfachsten Möglichkeiten, einfache Interaktionen auf einer Webseite zu erstellen.

instagram viewer

Sie benötigen Kenntnisse über CSS-Übergänge, Eigenschaften, Best Practices und mehr, bevor Sie mit der Erstellung nahtloser, interaktiver Websites beginnen können.

CSS-Übergänge verstehen

Ein CSS-Übergang ändert einen Eigenschaftswert über einen bestimmten Zeitraum hinweg reibungslos von einem Anfangszustand in einen Endzustand. Solche Übergänge verleihen Webelementen Feedback und visuelle Attraktivität und können das Benutzererlebnis verbessern. Übergänge sind einer von vielen Funktionen, mit denen Sie eine Website responsive gestalten können.

Ein Übergang erfolgt als Reaktion auf ein Auslöseereignis, beispielsweise wenn Sie mit der Maus über eine Schaltfläche fahren. Wenn Sie beispielsweise mit der Maus über eine Schaltfläche fahren, kann ein CSS-Übergang die Hintergrundfarbe von einem Zustand (anfänglich) in einen anderen (endgültig) ändern. Dieser Übergang erfolgt über die von Ihnen angegebene Dauer und erzeugt einen optisch ansprechenden Effekt.

Übergangseigenschaften

Unabhängig vom Effekt, den Sie erzeugen möchten, müssen Sie die verfügbaren Übergangseigenschaften verstehen. Sie können diese verwenden, um das Verhalten Ihrer Übergänge zu optimieren.

Übergangseigenschaft

Diese Eigenschaft bestimmt, welche CSS-Eigenschaft (oder welche Eigenschaften) den Übergangseffekt erfahren. Sie können mehrere durch Kommas getrennte Eigenschaften auflisten, um gleichzeitig einen Übergang durchzuführen. Fügen Sie einen bestimmten Eigenschaftsnamen ein, damit sich während des Übergangs nur diese Eigenschaft ändert. Oder verwenden Sie das Schlüsselwort alle um alle CSS-Eigenschaften zu überführen, die den Übergang unterstützen.

Hier ist die Syntax:

transition-property: property1, property2, ...;

Übergangszeit

Diese Eigenschaft legt die Dauer des Übergangseffekts fest und gibt an, wie lange die Animation dauern soll. Geben Sie den Wert beispielsweise in Sekunden (s) oder Millisekunden (ms) an 0,5s oder 300ms. Dies ist die Syntax:

transition-duration: time;

Übergangs-Timing-Funktion

Diese Eigenschaft steuert das Timing des Übergangs und definiert die Beschleunigung und Verzögerung der Animation. Sie können es bei der Gestaltung von Elementen verwenden, um verschiedene Lockerungseffekte zu erzielen. Hier sind einige Werte/Timing-Funktionen zum Ausprobieren:

  • Leichtigkeit: Langsamer Start, dann schnell, dann langsames Ende (Standard).
  • linear: Konstante Geschwindigkeit.
  • leichtgängig: Langsamer Start.
  • Erleichterung: Langsames Ende.
  • Einfaches Ein- und Aussteigen: Langsamer Anfang und Ende.

Hier ist die Syntax:

transition-timing-function: timing-function;

Übergangsverzögerung

Diese Eigenschaft führt zu einer Verzögerung, bevor der Übergang beginnt. Sie können den Wert in Sekunden (s) oder Millisekunden (ms) angeben. Die Syntax lautet:

transition-delay: time;

Diese Eigenschaften steuern gemeinsam, wie sich der Übergang verhält, einschließlich der animierten Eigenschaften und wie sich das Timing der Animation genau verhält.

Erste Schritte mit einfachen Übergängen

Die CSS-Übergangseigenschaften zu verstehen ist eine Sache, aber wie funktionieren sie in der Praxis? Hier sind einige Schritte, die Sie befolgen sollten, wenn Sie ein Element mithilfe von Übergängen formatieren möchten.

1. Wählen Sie Ihr HTML-Element aus

Wählen Sie das HTML-Element aus, auf das Sie einen Übergang anwenden möchten. Dies kann eine Schaltfläche, ein Link, ein Bild oder ein anderes Element sein, dem Sie einen interaktiven Effekt hinzufügen möchten.

html>
<html>
<head>
<style>
 /* CSS goes here */
style>
head>
<body>

<buttonclass="transition-button">Hover Mebutton>
body>
html>

Mit diesem Markup erhalten Sie eine einfache Standardschaltfläche, mit der Sie mit der Arbeit beginnen können:

2. Identifizieren Sie die Eigenschaft für den Übergang und definieren Sie den Anfangszustand

Bestimmen Sie, welche CSS-Eigenschaft des ausgewählten Elements Sie animieren möchten, und legen Sie den anfänglichen Stil des Elements mithilfe von CSS fest. Dieser Zustand stellt dar, wie das Element angezeigt wird, wenn Benutzer nicht damit interagieren.

<style>
/* Identify the property (background-color) */
.transition-button {
 /* Define the initial state */
 background-color: blue;
 color: white;
 padding: 10px 20px;
 border: none;
 cursor: pointer;
}
style>

Ihre Schaltfläche verfügt nun über einige Stile, mit denen Sie den Übergang üben können:

3. Geben Sie den Schwebezustand an

Erstellen Sie eine CSS-Regel, die gilt, wenn Sie mit der Maus über das Element fahren. Ändern Sie innerhalb dieser Regel die CSS-Eigenschaft, die Sie im zweiten Schritt identifiziert haben, in ihren endgültigen Zustand.

<style>
/* Specify the hover state */
.transition-button: hover {
 background-color: red;
}
style>

4. Übergangseigenschaften anwenden

Benutzen Sie die Übergangseigenschaft, Übergangszeit, Und Übergangs-Timing-Funktion Eigenschaften, um die Übergangsdetails anzugeben.

<style>
.transition-button {
 /* Specify transition properties */
 transition-property: background-color;
 transition-duration: 0.5s;
 transition-timing-function: ease;
}
style>

In diesem Beispiel wird gezeigt, wie Sie eine einfache Schaltfläche mit einem Hintergrundfarbübergang erstellen, der ausgeführt wird, wenn der Mauszeiger darüber bewegt wird. Die Hintergrundfarbe geht innerhalb von 0,5 Sekunden sanft von Blau zu Rot über und wirkt beruhigend. Hier können Sie die volle Wirkung sehen GitHub Demo.

Nutzen Sie diese Schritte als Grundlage, um komplexere Übergänge und Animationen in Ihren Webentwicklungsprojekten zu erkunden. Probieren Sie einige Projekte aus, wo Sie können Passen Sie Kontrollkästchen und Optionsfelder an, Lernen Sie, ein einfaches Akkordeon zu bauen, und mehr.

Best Practices und Tipps für Anfänger

Hier finden Sie einige Best Practices und Tipps, die Ihnen den Einstieg in die Arbeit mit CSS-Übergängen erleichtern sollen.

  • Beginnen Sie mit einfachen Übergängen. Wenn Sie mit CSS-Übergängen noch nicht vertraut sind, beginnen Sie mit einfachen Animationen wie Farbänderungen oder Deckkraftanpassungen. Es wird Ihnen helfen, die Grundlagen zu verstehen, bevor Sie komplexere Übergänge in Angriff nehmen.
  • Verstehen Sie das Boxmodell. Machen Sie sich mit das CSS-Box-Modell, das Eigenschaften wie Breite, Höhe, Innenabstand und Rand umfasst. Beim Animieren von Elementen ist es wichtig zu verstehen, wie diese Eigenschaften funktionieren.
  • Planen Sie Ihre Übergänge. Planen Sie vor der Implementierung von Übergängen, was Sie erreichen möchten. Skizzieren Sie die Übergangszustände, den Zeitpunkt und die Auswirkungen auf Papier oder digital, um unnötige Versuche und Irrtümer zu vermeiden.
  • Optimieren Sie die Leistung. Achten Sie bei der Verwendung von Übergängen auf die Leistung. Vermeiden Sie den übermäßigen Einsatz komplexer Übergänge, insbesondere auf Mobilgeräten, da diese sich auf die Ladezeiten und das Benutzererlebnis auswirken.
  • Berücksichtigen Sie die Barrierefreiheit. Stellen Sie sicher, dass Ihre Übergänge für alle Benutzer zugänglich sind. Bieten Sie alternative Möglichkeiten für den Zugriff auf Inhalte oder Funktionen, die auf Übergängen basieren, insbesondere für Menschen mit Behinderungen.
  • Verwenden Sie die Entwicklertools von Chrome. Nutzen Sie die Entwicklertools von Chrome optimal für eine nahtlose Übergangsentwicklung. Verwenden Sie DevTools, um Übergangseigenschaften zu überprüfen und zu ändern in Echtzeit und experimentieren Sie mit verschiedenen Timing-Funktionen.

Indem Sie diese Best Practices und Tipps befolgen, können Sie eine solide Grundlage für die Arbeit mit CSS-Übergängen schaffen und schrittweise Ihre Fähigkeiten weiterentwickeln, um ansprechende und interaktive Weberlebnisse zu erstellen.

Cross-Browser-Kompatibilität

Bei der Arbeit mit CSS-Übergängen ist die browserübergreifende Kompatibilität ein entscheidender Aspekt, um sicherzustellen, dass Ihre Animationen und Interaktionen in verschiedenen Webbrowsern konsistent funktionieren. Hier sind einige Best Practices und Tipps zum Erreichen einer browserübergreifenden Kompatibilität mit CSS-Übergängen:

  • Verwenden Sie Präfixe für herstellerspezifische Eigenschaften. Verschiedene Browser erfordern möglicherweise Herstellerpräfixe für bestimmte CSS-Eigenschaften. Beispielsweise müssen Sie möglicherweise verwenden -webkit- für Safari und Chrome, -moz- für Firefox und -Ö- für Oper. Fügen Sie diese Präfixe bei Bedarf immer ein, um eine breite Palette von Browsern abzudecken.
  • Testen Sie auf mehreren Browsern. Testen Sie Ihre Übergänge regelmäßig in verschiedenen Browsern, darunter Chrome, Firefox, Safari, Edge und Opera. Verwenden Sie Browser-Entwicklertools, um Probleme zu identifizieren und zu beheben.
  • Fügen Sie Fallback-Stile für Eigenschaften ein, die mit Übergängen animiert werden. Falls Übergänge nicht unterstützt werden, gelten diese Stile.

Wenn Sie diese Vorgehensweisen befolgen, können Sie CSS-Übergänge erstellen, die in verschiedenen Browsern reibungslos und konsistent funktionieren.

Üben Sie weiter mit CSS-Übergängen

Bleiben Sie über die neuesten Webentwicklungstrends und Best Practices bei CSS-Übergängen auf dem Laufenden. Experimentieren Sie ruhig mit verschiedenen Übergangseigenschaften und -werten, um einzigartige Effekte zu erzielen. Lernen erfordert häufig Versuch und Irrtum. Daher sollten Sie Ihre Übergänge im Laufe der Zeit wiederholen und anpassen.