Beispiele für CSS-Übergänge - Verwenden der Hover-Animation, Ändern der Deckkraft und mehr

Wenn Sie mit Webtechnologien wie CSS, HTML und JavaScript arbeiten, ist es wichtig, Grundkenntnisse über CSS-Animationen und -Übergänge zu haben.

In diesem Artikel erfahren Sie, wie Sie mit CSS einige grundlegende Übergangsanimationen erstellen.

So animieren Sie ein Element mit einem grundlegenden Übergang beim Schweben

In diesem Beispiel wird die Deckkraft eines Elements geändert, wenn ein Benutzer mit der Maus über das Element fährt oder mit der Maus darüber fährt.

      Static Template   .elem { background: blueviolet; width: 300px; height: 150px; } .elem:hover { opacity: 0.5; } 

Dies ist ein einfacher Übergang, der ausgelöst werden kann, wenn wir mit der Maus über das Element fahren. Wir können mehr als einen Übergang hinzufügen, der gleichzeitig ausgeführt wird.

Fügen wir eine Skalentransformationseigenschaft hinzu, um dem Element einen Skalierungsübergang hinzuzufügen.

 .elem:hover { transform: scale(1.1); }

Der Übergang scheint jedoch nicht reibungslos zu verlaufen, da wir weder die Dauer des Übergangs definiert noch eine Timing-Funktion verwendet haben.  

Wenn wir die transitionEigenschaft hinzufügen , wird das Element reibungsloser verschoben.

 .elem { background: blueviolet; width: 300px; height: 150px; margin: 20px auto; transition: 500ms linear; }

Lassen Sie uns zusammenfassen, wie die Übergangseigenschaft funktioniert:

 transition: 500ms linear;
  • 500ms: die Dauer des Übergangs in Millisekunden
  • linear: die Timing-Funktion
div { transition:    ; }

Wir können weitere Optionen wie unten hinzufügen (Beispiele aus dem MDN):

#delay { transition-property: font-size; transition-duration: 4s; transition-delay: 2s; }

Was macht dieser Code?

  • Übergangseigenschaft: Die Eigenschaft, die Sie animieren möchten. Es kann eine beliebige CSS - Element sein , wie background, height, translateY, translateX, und so weiter.
  • Übergangsdauer: Die Dauer des Übergangs
  • Übergangsverzögerung: Die Verzögerung vor Beginn des Übergangs

Weitere Informationen zu den verschiedenen Verwendungsmöglichkeiten von transitionCSS finden Sie hier.

So machen Sie Übergänge mithilfe der Animationseigenschaft und der Keyframes interaktiver

Mit CSS-Übergängen können wir mehr tun, um diese Animation kreativer und interaktiver zu gestalten.

So verschieben Sie ein Element mit Keyframes

Schauen wir uns ein Beispiel an, in dem sich das Element von Punkt A nach Punkt B bewegt. Wir werden translateX und translateY verwenden.

      Static Template   .elem { background: orange; width: 300px; height: 150px; animation: moveToRight 2s ease-in-out; animation-delay: 1000ms; } @keyframes moveToRight { 0% { transform: translateX(0px); } 100% { transform: translateX(300px); } } 

Und das bekommen wir:

Dieses Mal haben wir neue Eigenschaften wie Animation und Keyframes verwendet. Wir haben die animationEigenschaft verwendet, um den Namen und die Dauer der Animation zu definieren. Mit Keyframes können wir beschreiben, wie sich das Element bewegen soll.

 animation: moveToRight 2s ease-in-out;

Hier habe ich die Animation benannt moveToRight- aber Sie können einen beliebigen Namen verwenden. Die Dauer ist 2sund ease-in-outist eine Zeitsteuerungsfunktion.

Es gibt auch andere Zeitfunktionen Sie wie verwenden können ease-in, linear, ease-outdie im Grunde die Animation glatter. Hier erfahren Sie mehr über die Timing-Funktionen.

@keyframesnimmt den Namen der Animation. In diesem Fall ist es moveToRight.

 @keyframes moveToRight { 0% { transform: translateX(0px); } 100% { transform: translateX(300px); } }

keyframesführt die Animation in mehreren Schritten aus. Im obigen Beispiel wird ein Prozentsatz verwendet, um den Bereich oder die Reihenfolge der Übergänge darzustellen. Wir könnten auch die fromund toMethoden verwenden. Wie unten"

 @keyframes moveToRight { from { transform: translateX(0px); } to { transform: translateX(300px); } }

from repräsentiert den Startpunkt oder den ersten Schritt der Animation.

to ist der Endpunkt oder der letzte Schritt der auszuführenden Animation.

In einigen Fällen möchten Sie möglicherweise einen Prozentsatz verwenden. Angenommen, Sie möchten mehr als zwei Übergänge hinzufügen, die in einer Sequenz wie der folgenden ausgeführt werden:

 @keyframes moveToRight { 0% { transform: translateX(0px); } 50% { transform: translateX(150px); } 100% { transform: translateX(300px); } }

Wir können kreativer sein und viele Eigenschaften gleichzeitig animieren, wie im folgenden Beispiel:

Hier können Sie mit Eigenschaften und Animationstechniken in der Sandbox herumspielen:

Das sind viel mehr Dinge, die wir mit Keyframes machen können. Fügen wir zunächst unserer Animation weitere Übergänge hinzu.

So animieren Sie weitere Eigenschaften und nehmen sie in den Übergang auf

Dieses Mal werden wir den Hintergrund animieren und das Element in einem quadratischen Muster bewegen. Wir werden die Animation für immer laufen lassen, indem wir die infiniteEigenschaft als Timing-Funktion verwenden.

      Static Template   .elem { background: orange; width: 250px; height: 250px; border-radius: 10px; animation: moveToLeft 5s linear infinite; animation-delay: 1000ms; } @keyframes moveToLeft { 0% { transform: translateX(0px); background: linear-gradient( to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100% ); } 25% { transform: translateX(400px); background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); } 50% { transform: translateY(200px) translateX(400px); background: linear-gradient(to top, #30cfd0 0%, #330867 100%); } 75% { transform: translateX(0px) translateY(200px); background: linear-gradient(120deg, #f6d365 0%, #fda085 100%); } 100% { transform: translateY(0px); } } 

Lassen Sie es uns zusammenfassen. Zuerst fügen wir hinzu infinite, damit die Animation für immer läuft.

animation: moveToLeft 5s linear infinite;

Und dann teilen wir die Animation in vier Schritte auf. Bei jedem Schritt führen wir einen anderen Übergang aus und die gesamte Animation wird in einer Sequenz ausgeführt.

  • First step: set the element horizontally to translateX(0px), and change the background to the gradient.
 0% { transform: translateX(0px); background: linear-gradient( to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100% ); }
  • The second animation will move the element from the left to the right and change the background color.
 25% { transform: translateX(400px); background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); }
  • The third animation will move the element down using translateY and change the background color again.
  • In the fourth step, the element will move back to the left and change the background color.
  • In the fifth animation the element should go back to its original place.

Wrapping up

In this article, we covered various things you can do with CSS transitions. You can use CSS transitions in many ways in your applications to create a better user experience.

Nachdem Sie die Grundlagen von CSS-Animationen gelernt haben, möchten Sie möglicherweise darüber hinaus komplexere Dinge erstellen, die eine Benutzerinteraktion erfordern. Hierfür können Sie JavaScript oder Animationsbibliotheken von Drittanbietern verwenden.

Hallo, mein Name ist Said Hayani. Ich habe subscribi.io erstellt, um Entwicklern, Bloggern und Influencern zu helfen, ihr Publikum durch Newsletter zu vergrößern.