linear vs. ease
CSS3 Animation

CSSWerteBedeutung
animation-name:Spinning-ArnoldName
animation-duration:24s; 0; 8s;Dauer
animation-timing-function:ease; linear, ease-in; ease-out; ease-in-out; cubic-bezier(n,n,n,n);Beschleunigung der Animation
animation-delay24s; 0; 8s;Verzögerung des Starts
animation-iteration-count:1; 5; infiniteDurchgänge der Animation
animation-direction:normal; reverse; alternate; alternate-reverseAbspielrichtung, z.B. vorwärts und dann rückwärts etc.
@keyframes0% {css: value; ... } 100% {css: value; ...};
from {css: value; ... } to {css: value; ... };
Beliebig viele Keyframes der Animation
animation:Spinning-Arnold 5s infinite;Kurzschreibweise für die Animations Eigenschaften. (name, duration, timing, delay, iteration, direction)
animation-play-state:running; paused;Abspielen oder Pause

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.

ease-in/out
CSS3 Animation

CSSWerteBedeutung
animation-name:Spinning-ArnoldName
animation-duration:24s; 0; 8s;Dauer
animation-timing-function:ease; linear, ease-in; ease-out; ease-in-out; cubic-bezier(n,n,n,n);Beschleunigung der Animation
animation-delay24s; 0; 8s;Verzögerung des Starts
animation-iteration-count:1; 5; infiniteDurchgänge der Animation
animation-direction:normal; reverse; alternate; alternate-reverseAbspielrichtung, z.B. vorwärts und dann rückwärts etc.
@keyframes0% {css: value; ... } 100% {css: value; ...};
from {css: value; ... } to {css: value; ... };
Beliebig viele Keyframes der Animation
animation:Spinning-Arnold 5s infinite;Kurzschreibweise für die Animations Eigenschaften. (name, duration, timing, delay, iteration, direction)
animation-play-state:running; paused;Abspielen oder Pause

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.

cubic-bezier
CSS3 Animation

CSSWerteBedeutung
animation-name:Spinning-ArnoldName
animation-duration:24s; 0; 8s;Dauer
animation-timing-function:ease; linear, ease-in; ease-out; ease-in-out; cubic-bezier(n,n,n,n);Beschleunigung der Animation
animation-delay24s; 0; 8s;Verzögerung des Starts
animation-iteration-count:1; 5; infiniteDurchgänge der Animation
animation-direction:normal; reverse; alternate; alternate-reverseAbspielrichtung, z.B. vorwärts und dann rückwärts etc.
@keyframes0% {css: value; ... } 100% {css: value; ...};
from {css: value; ... } to {css: value; ... };
Beliebig viele Keyframes der Animation
animation:Spinning-Arnold 5s infinite;Kurzschreibweise für die Animations Eigenschaften. (name, duration, timing, delay, iteration, direction)
animation-play-state:running; paused;Abspielen oder Pause

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.

► Weitere Infos

Externe Quellen

Kompatibilität

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

Die Unterstützung für transition und die timining functions (ease etc.) ist bei den heute gängigen Browser sehr gut.


W3C CSS Transitions

CSS Transitions

2.3. The ‘transition-timing-function’ Property

Original Spezifikation der W3C für Transitions und die timining functions (ease etc.) aus dem Jahr 2013.


Transition und timing function auf selfhtml.wiki

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

Umfangreiche Erklärung in deutscher Sprache.


Puls Tutorial

https://css-tricks.com/(...)animation/

Tutorial in englischer Sprache um eine pulsierende Animation zu erstellen.


Ceaser - CSS Easing Animation Tool

http://html5doctor.com/the-figure-figcaption-elements/

Editor in englischer Sprache mit dem eigene timing functions erstellt werden können.


Easing Übersicht

http://css3.bradshawenterprises.com/transitions/

Sehr schöne Übersichten der transition delays und timing functions.


The Illusion of Life - Disneys 12 Basic Principle of Animation

https://www.youtube.com/watch?v=yiGY0qiy8fY

https://(...)/wiki/12_basic_principles_of_animation

Sehr schöne Übersichten der transition delays und timing functions.