Zum Inhalt springen

Transitions

transition

#transition Kurzschreibweise transition-property transition-duration transition-timing-function und transition-delay. Nur transition-duration ist erforderlich. transition: 1s; transition-duration ist auf 1s eingestellt transition-property ist standardmäßig auf all transition-timing-function ist standardmäßig auf ease transition-delay ist standardmäßig auf 0s Hover me transition: 1s… 

transition-timing-function

#transition-timing-function Legt fest, wie die Werte zwischen dem Start und dem Ende des Übergangs berechnet werden. default transition-timing-function: ease; Der Übergang beginnt langsam, beschleunigt sich in der Mitte und verlangsamt sich am Ende. Hover me transition-timing-function: ease-in;… 

transition-delay

#transition-delay Legt fest, wie lange der Übergang vor dem Beginn warten muss. default transition-delay: 0s; Der Übergang wird null Sekunden warten und somit sofort beginnen. Hover me transition-delay: 1.2s; Sie können dezimale Werte in Sekunden mit dem… 

transition-duration

#transition-duration Legt fest, wie lange der Übergang dauert. default transition-duration: 0s; Der Übergang dauert null Sekunden und ist somit instant. Hover me transition-duration: 1.2s; Sie können dezimale Werte in Sekunden mit dem Schlüsselwort s verwenden. Hover me… 

transition-property

#transition-property Legt fest, welche Eigenschaften übergehen werden. default transition-property: all; Das Element wird alle Eigenschaften übertragen: background color transform Hover me transition-property: none; Das Element wird keine Eigenschaft haben: der Übergang ist also instant. Hover me transition-property:…