V5_Transition

Transition Übergangseffekte

Um zu verstehen, welche Funktion die transition Angaben haben, ein Beispiel einer Zustandsveränderung ohne transition. Dein File mit den Übungen zu transform ergänzen wir nun so:

.transformed { 
    height: 500px; 
    background-color:lightblue; 
    
} 

.transformed:hover{ 
    /* Veränderter Zustand */
    background-color:black; 
    transform: translate(100px, 200px);
}

Du wirst feststellen, dass der Zustandswechsel abrupt vollzogen wird – ohne Übergang. :hover ist übrigens eine sogenannte Pseudoklasse. Eine CSS-Pseudoklasse ist ein Schlüsselwort, das zu einem Selektor hinzugefügt wird und einen speziellen Zustand des/ der ausgewählten Elements/Elemente angibt. :hover bedeutet, der Mauszeiger des Benutzers liegt auf diesem Element – dann tritt es in diesen Zustand.
Übersicht über alle Pseudoklassen: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo- classes

Steuerung von Übergangseffekten

transition-property

Die CSS-Eigenschaft transition-property legt die CSS- Eigenschaften fest, auf die ein Übergangseffekt angewendet werden soll.

/* Beispiele */

 transition-property: none;
 transition-property: all;
 transition-property: font-size;
 

Mit none wird keine der Eigenschaften per Übergang verändert. Folge, harter Wechsel von einem Zustand in einen anderen. Mit all werden alle Eigenschaften per Übergangseffekt verändert. Mit der Angabe einer spezifischen Property (Bsp. font-size) wird eine Änderung dieser Angabe mit einem Übergangseffekt verändert. Alle anderen Properties würden sich ohne Übergang verändern.

transition-duration

Die CSS-Eigenschaft "transition-duration" legt fest, wie lange eine Übergangsanimation dauern soll, bis sie abgeschlossen ist. Standardmäßig ist der Wert 0s, was bedeutet, dass keine Animation stattfindet. Die Zeitangabe kann in s für Sekunden oder ms für Millisekunden gemacht werden.

/* Beispiel eine halbe Sekunde Dauer */
transition-duration: 500ms;

transition-timing-function

Die CSS-Eigenschaft transition-timing-function legt fest, wie Zwischenwerte für CSS-Eigenschaften berechnet werden, die von einem Übergangseffekt betroffen sind. https://developer.mozilla.org/en-US/docs/Web/CSS/transition- timing-function

/* ein paar Beispiele */
transition-timing-function: linear;
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;

transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);

Ergänzung zu Cubic Bézier: auf dieser Seite kannst du deine eigene Animationskurve erstellen: https://cubic-bezier.com

transition-delay

Die CSS-Eigenschaft transition-delay gibt die Dauer an, die gewartet wird, bevor der Übergangseffekt einer Eigenschaft gestartet wird, wenn sich ihr Wert ändert.

/* Beispiel eine Sekunde Verzögerung */
transition-delay: 1s;

transition

Die CSS-Eigenschaft "transition" ist eine Kurzform für "transition-property", "transition-duration", "transition-timing- function" und "transition-delay" (Angaben in dieser Reihenfolge).

transition: all 0.5s ease-out 1s;

Die Transition Properties müssen im Default State des Elements definiert werden, nicht im veränderten State! Wenn ihr sie im veränderten State definiert, wird nur der Weg von kein Hover zu Hover animiert sein, der Weg zurück nicht (ausprobieren).

.transformed { 
    height: 500px; 
    background-color:lightblue; 
    transition: all 0.5s ease-out 1s;
} 

.transformed:hover{ 
    /* Veränderter Zustand */
    background-color:black; 
    transform: translate(100px, 200px);
}

Üben

1. Arbeite dich zur Repetition durch diese Übungen durch: https://www.w3schools.com/css/exercise.asp?filename=exercise_css3_transitions1
   

2. Ergänze das Smithson Plakat aus der Transform Übung mit Transitions, die du über die Pseudoklasse :hover auslöst.

3. Mach eine Kopie von Sprint 1 und animiere testweise ein Element, eine Partie usw. über das Pseudoelement `:hover` und die `transition` Eigenschaften.