1. Startseite
  2. »
  3. Allgemeine Themen & Trends
  4. »
  5. IT
  6. »
  7. CSS Transition einfach erklärt

CSS Transition einfach erklärt

IT
css transition

CSS Transition einfach erklärt

Ohne CSS Transition kann ein HTML-Dokument nicht funktionieren. Generell ermöglicht CSS erst das Erstellen einer Website. Erfahre hier mehr über das Thema CSS Transition und wie es funktioniert.

Was ist CSS Transition überhaupt?

Mit CSS Transition zu arbeiten heißt immer, dass Du eine CSS-Eigenschaft änderst. Dabei steht der zeitliche Faktor im Vordergrund. Durch CSS Transition kannst Du dann Elemente, die sich in Deinem HTML-Dokument befinden, beispielsweise unkompliziert bewegen.

Das heißt, Du schaffst quasi Übergänge zwischen dem „alten“ HTML-Element und dem „neuen“. Dadurch können Benutzer besser mit Deiner Seite interagieren. Du bist bestimmt schon einmal auf eine Seite gestoßen, bei der Du mit Deiner Maus über einen Button „gegangen“ bist, wodurch sich dieser beispielsweise verschoben hat. Das funktioniert aber nur bei ganz bestimmten HTML-Elementen.

So funktioniert CSS Transition

Im Grunde genommen musst Du Dir nur über zwei Dinge Gedanken machen: Was genau einen Effekt bekommen soll und wie lange dieser aktiv sein soll. Zusätzlich ist es wichtig, dass Du weißt, wie schnell der Übergang stattfinden soll. Das heißt, ob der Übergang beispielsweise langsam startet, zwischendrin beschleunigt und dann wieder langsam wird. Genauso solltest Du Dich für die Dauer der Verkürzung entscheiden, also wann genau der Übergang ausgelöst wird. Du musst also auf diese vier Einzelangaben zurückgreifen:

  • property
  • duration
  • timing function
  • delay

CSS transition: property

Hierbei geht es um das Element bzw. die Eigenschaft, die verändert werden soll. Du kannst hierbei entscheiden, ob Du keinen Übergang (none) haben oder alle Eigenschaften mit einem Übergang (all) versehen willst. Zudem kannst Du auch nur für bestimmte Eigenschaften einen Übergang (Eigenschaft) festlegen.

CSS transition: duration

Um genau festzulegen, wie lange der Übergang sein soll, brauchst Du die Eigenschaft duration. Standardmäßig ist 0 festgelegt und Du musst nur die Zeit in Sekunden oder Millisekunden angeben. Schon hast Du die Dauer festgelegt!

CSS transition: timing function

Mit timing function kannst Du die Geschwindigkeit Deines Übergangs bestimmen. Du hast hier die Wahl zwischen verschiedenen Angaben. Hier ein Überblick über die wichtigsten.

  • ease: langsam > schnell > langsam
  • linear: Geschwindigkeit ändert sich nicht
  • ease-in: beginnt langsam
  • ease-out: endet langsam
  • ease-in-out: beginnt und endet langsam

CSS transition: delay

Indem Du dem Element die Eigenschaft delay zuweist, bestimmst Du, wann genau der Übergang beginnen soll, wenn der Benutzer mit dem Element in Berührung kommt. Hierbei kannst Du wieder die Zeit in Sekunden oder Millisekunden angeben. Alternativ ist es auch möglich, den Standard von 0 beizubehalten.

CSS Transition: Beispiel

Nehmen wir an, Du willst, dass sich die Hintergrundfarbe wechselt, sobald der Nutzer mit der Maus über einen Button bewegt. Der Effekt drei Sekunden später eintreten, drei Sekunden andauern und von schnell zu langsam wechseln. Das sieht dann so aus:

.button{
background-color:black;
color:white;
padding:12px 9px;
text-decoration:none;
}
.button:hover{
color:white;
background-color:green;
}
.transition{
transition-property:background-color;
transition-duration:3s;
}
.out{
transition-timing-function: ease-out;
}
.del{
transition-delay: 3s;
}

CSS Tracking ist wichtig für HTML-Seiten

CSS Tracking ermöglicht es Dir, Deine HTML-Elemente aufzupeppen. Du kannst Deine Seite dadurch interaktiver und attraktiver für Nutzer machen. Am Ende des Tages ist das auch genau das, was Du willst, nicht wahr?

Häufig gestellte Fragen zu CSS Tracking

Was bedeutet CSS Tracking?

Du änderst mithilfe des CSS Trackings eine CSS-Eigenschaft – und das abhängig von der Zeit. Das heißt, Du legst gewisse „Effekte“ fest und wie lange diese Effekte andauern sollen.

Was bedeutet delay beim CSS Tracking?

Mit der Angabe delay legst Du fest, mit viel Verzögerung Dein Effekt eintreten soll.

Was bedeutet property beim CSS Tracking?

Mit property ist das Element bzw. die Eigenschaft gemeint, die einen Effekt bekommen soll.

Ähnliche Beiträge