color
transition

CSSWerteBedeutung
transition:all 1s width 2s ease, color 0.5s linear;Kurzschreibweise für delay duration property und timing function
transition-delay:0.4sVerzögerung des Übergangs
transition-duration:0.6sDauer des Übergangs
transition-property:all, color, background-color (...)Angabe auf welche CSS Eigenschaft der Übergang angewendet wird.
transition-timing-function:ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)Tempokurve des Übergangs. Z.B. langsamer Start und schnelles Ende oder anders herum.

Werte für Timing Function

CSS-WerteBedeutung
easeLangsamer Start, schneller Mittelteil, langsames Ende. Ist der Standardwert falls keine anderen Timing Functions genutzt werden.
linearDurchgängig gleichmässiges Tempo.
ease-inLangsamer Start und dann zunehmend schneller.
ease-outSchneller Start und dann zunehmend langsamer.
ease-in-outWirkt insgesamt gegenüber ease langsamer. Verzögert Start und Endposition und beschleunigt im Mittelteil nicht so stark.
cubic-bezier (n,n,n,n)Eigene Tempokurve des Übergangs.

frageantwort
Die Schrift im Hover soll dunkelgrün werden.color: 090;
Die Hintergrundfarbe soll ganz langsam über 2.2 Sekunden überblendenbackground-color 2.2s ease
size
transition

CSSWerteBedeutung
transition:all 1s width 2s ease, color 0.5s linear;Kurzschreibweise für delay duration property und timing function
transition-delay:0.4sVerzögerung des Übergangs
transition-duration:0.6sDauer des Übergangs
transition-property:all, color, background-color (...)Angabe auf welche CSS Eigenschaft der Übergang angewendet wird.
transition-timing-function:ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)Tempokurve des Übergangs. Z.B. langsamer Start und schnelles Ende oder anders herum.

Werte für Timing Function

CSS-WerteBedeutung
easeLangsamer Start, schneller Mittelteil, langsames Ende. Ist der Standardwert falls keine anderen Timing Functions genutzt werden.
linearDurchgängig gleichmässiges Tempo.
ease-inLangsamer Start und dann zunehmend schneller.
ease-outSchneller Start und dann zunehmend langsamer.
ease-in-outWirkt insgesamt gegenüber ease langsamer. Verzögert Start und Endposition und beschleunigt im Mittelteil nicht so stark.
cubic-bezier (n,n,n,n)Eigene Tempokurve des Übergangs.

frageantwort
Breite und Höhe sollen sich schneller verändern.z.B. width 0.4s ease, height 0.2s ease-out;
Die Breite soll im Hover auf 380px und die Höhe auf 90px verändert werden.width:380px; height:90px;
fade
transition

CSSWerteBedeutung
transition:all 1s width 2s ease, color 0.5s linear;Kurzschreibweise für delay duration property und timing function
transition-delay:0.4sVerzögerung des Übergangs
transition-duration:0.6sDauer des Übergangs
transition-property:all, color, background-color (...)Angabe auf welche CSS Eigenschaft der Übergang angewendet wird.
transition-timing-function:ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)Tempokurve des Übergangs. Z.B. langsamer Start und schnelles Ende oder anders herum.

Werte für Timing Function

CSS-WerteBedeutung
easeLangsamer Start, schneller Mittelteil, langsames Ende. Ist der Standardwert falls keine anderen Timing Functions genutzt werden.
linearDurchgängig gleichmässiges Tempo.
ease-inLangsamer Start und dann zunehmend schneller.
ease-outSchneller Start und dann zunehmend langsamer.
ease-in-outWirkt insgesamt gegenüber ease langsamer. Verzögert Start und Endposition und beschleunigt im Mittelteil nicht so stark.
cubic-bezier (n,n,n,n)Eigene Tempokurve des Übergangs.

frageantwort
Das Fading soll in 0.25 Sekunden passierentransition: all 0.25s ease;
morph
transition

CSSWerteBedeutung
transition:all 1s width 2s ease, color 0.5s linear;Kurzschreibweise für delay duration property und timing function
transition-delay:0.4sVerzögerung des Übergangs
transition-duration:0.6sDauer des Übergangs
transition-property:all, color, background-color (...)Angabe auf welche CSS Eigenschaft der Übergang angewendet wird.
transition-timing-function:ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)Tempokurve des Übergangs. Z.B. langsamer Start und schnelles Ende oder anders herum.

Werte für Timing Function

CSS-WerteBedeutung
easeLangsamer Start, schneller Mittelteil, langsames Ende. Ist der Standardwert falls keine anderen Timing Functions genutzt werden.
linearDurchgängig gleichmässiges Tempo.
ease-inLangsamer Start und dann zunehmend schneller.
ease-outSchneller Start und dann zunehmend langsamer.
ease-in-outWirkt insgesamt gegenüber ease langsamer. Verzögert Start und Endposition und beschleunigt im Mittelteil nicht so stark.
cubic-bezier (n,n,n,n)Eigene Tempokurve des Übergangs.

frageantwort
Das Rechteck soll zu statt zu einem Oval zu einem richtigen Kreis morphen.z.B.
.morph:hover
{ border-radius: 50%; width:120px; height:120px;}
vignette
transition

CSSWerteBedeutung
transition:all 1s width 2s ease, color 0.5s linear;Kurzschreibweise für delay duration property und timing function
transition-delay:0.4sVerzögerung des Übergangs
transition-duration:0.6sDauer des Übergangs
transition-property:all, color, background-color (...)Angabe auf welche CSS Eigenschaft der Übergang angewendet wird.
transition-timing-function:ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)Tempokurve des Übergangs. Z.B. langsamer Start und schnelles Ende oder anders herum.

Werte für Timing Function

CSS-WerteBedeutung
easeLangsamer Start, schneller Mittelteil, langsames Ende. Ist der Standardwert falls keine anderen Timing Functions genutzt werden.
linearDurchgängig gleichmässiges Tempo.
ease-inLangsamer Start und dann zunehmend schneller.
ease-outSchneller Start und dann zunehmend langsamer.
ease-in-outWirkt insgesamt gegenüber ease langsamer. Verzögert Start und Endposition und beschleunigt im Mittelteil nicht so stark.
cubic-bezier (n,n,n,n)Eigene Tempokurve des Übergangs.

frageantwort
Der Übergang der Vignette soll langsam zum Ende kommentransition:all 0.25s ease-out;
push
transition

CSSWerteBedeutung
transition:all 1s width 2s ease, color 0.5s linear;Kurzschreibweise für delay duration property und timing function
transition-delay:0.4sVerzögerung des Übergangs
transition-duration:0.6sDauer des Übergangs
transition-property:all, color, background-color (...)Angabe auf welche CSS Eigenschaft der Übergang angewendet wird.
transition-timing-function:ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)Tempokurve des Übergangs. Z.B. langsamer Start und schnelles Ende oder anders herum.

Werte für Timing Function

CSS-WerteBedeutung
easeLangsamer Start, schneller Mittelteil, langsames Ende. Ist der Standardwert falls keine anderen Timing Functions genutzt werden.
linearDurchgängig gleichmässiges Tempo.
ease-inLangsamer Start und dann zunehmend schneller.
ease-outSchneller Start und dann zunehmend langsamer.
ease-in-outWirkt insgesamt gegenüber ease langsamer. Verzögert Start und Endposition und beschleunigt im Mittelteil nicht so stark.
cubic-bezier (n,n,n,n)Eigene Tempokurve des Übergangs.

frageantwort
Der Button soll deutlich verkleinert werden.z.B.

-webkit-transform: scale(0.4);
-ms-transform: scale(0.4);
transform: scale(0.4);
pull
transition

CSSWerteBedeutung
transition:all 1s width 2s ease, color 0.5s linear;Kurzschreibweise für delay duration property und timing function
transition-delay:0.4sVerzögerung des Übergangs
transition-duration:0.6sDauer des Übergangs
transition-property:all, color, background-color (...)Angabe auf welche CSS Eigenschaft der Übergang angewendet wird.
transition-timing-function:ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)Tempokurve des Übergangs. Z.B. langsamer Start und schnelles Ende oder anders herum.

Werte für Timing Function

CSS-WerteBedeutung
easeLangsamer Start, schneller Mittelteil, langsames Ende. Ist der Standardwert falls keine anderen Timing Functions genutzt werden.
linearDurchgängig gleichmässiges Tempo.
ease-inLangsamer Start und dann zunehmend schneller.
ease-outSchneller Start und dann zunehmend langsamer.
ease-in-outWirkt insgesamt gegenüber ease langsamer. Verzögert Start und Endposition und beschleunigt im Mittelteil nicht so stark.
cubic-bezier (n,n,n,n)Eigene Tempokurve des Übergangs.

frageantwort
Der Button soll etwas vergrößert werden.-webkit-transform: scale(1.55);
-ms-transform: scale(1.55);
transform: scale(1.55);
zoom
transition

CSSWerteBedeutung
transition:all 1s width 2s ease, color 0.5s linear;Kurzschreibweise für delay duration property und timing function
transition-delay:0.4sVerzögerung des Übergangs
transition-duration:0.6sDauer des Übergangs
transition-property:all, color, background-color (...)Angabe auf welche CSS Eigenschaft der Übergang angewendet wird.
transition-timing-function:ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)Tempokurve des Übergangs. Z.B. langsamer Start und schnelles Ende oder anders herum.

Werte für Timing Function

CSS-WerteBedeutung
easeLangsamer Start, schneller Mittelteil, langsames Ende. Ist der Standardwert falls keine anderen Timing Functions genutzt werden.
linearDurchgängig gleichmässiges Tempo.
ease-inLangsamer Start und dann zunehmend schneller.
ease-outSchneller Start und dann zunehmend langsamer.
ease-in-outWirkt insgesamt gegenüber ease langsamer. Verzögert Start und Endposition und beschleunigt im Mittelteil nicht so stark.
cubic-bezier (n,n,n,n)Eigene Tempokurve des Übergangs.

frageantwort
Die Augen der Katze sollen im Hover 20px nach oben. background-position: -95px -100px;
Wieso verschwindet eigentlich die Schrift?Die Schrift wird im Hover listig mit dem Alpha 0 bei rgba unsichtbar gemacht.
color: rgba(0,0,0,0);
Die Katze soll im Hover stärker vergrößert werden.z.B.
background-size: 240%;
Der Halo-Effekt beim Hover soll noch dramatischer werden.z.B.
box-shadow: inset 0 0 40px 5px rgba(60,30,10,0.5),
0 0 240px 60px rgba(255,255,250,0.95);
► Weitere Infos

Externe Quellen

Kompatibilität

http://caniuse.com/#feat=css-transitions

Die Unterstützung für transition ist bei den heute gängigen Browser unter Berücksichtigung der Vendor-Prefixe sehr gut. Die neueren Versionen der Browser benötigen die Vendor-Prefixe nicht mehr.


W3C CSS Transitions

CSS Transitions

Original Spezifikation der W3C für Transitions aus dem Jahr 2013.


Transition und timing function auf selfhtml.wiki

http://wiki.selfhtml.org(...)Transition

Umfangreiche Erklärung in deutscher Sprache.


The Basics of Easing

https://developers.google.com(...)animations/the-basics-of-easing

In der Natur gibt es keine lineare Bewegung. Insofern verhelfen die timing-functions zu einem organischen Look. Google Entwickler Paul Lewis betrachtet die Möglichkeiten dennoch kritisch und teilt seine Erfahrungswerte in diesem Artikel in englischer Sprache.

Schreibe einen Kommentar

Deine E-Mail Adresse wird später nicht angezeigt.

clear formSubmit