Administrationsseite***0-1Konfiguration***1000Visualisierung***1000-20Animationen

In einer Visualisierung***b-0 können Visuelemente***1002 mit Hilfe von Animationen animiert werden. Hinweis: Hier werden nur die Keyframes einer Animation definiert. Weitere Eigenschaften (Dauer einer Animation, etc.) werden in den Design-Eigenschaften***1003 des entsprechenden Visuelements***1002 definiert.

Eigenschaften

Vorschau

Mit den Schiebereglern wird die Dauer der Vorschau-Animation bzw. die Anzahl der Zyklen eingestellt. Die Schaltflächen starten bzw. stoppen die Vorschau-Animation.

Informationen zu Keyframes

Keyframes definieren grundsätzlich einen relativen Zeitpunkt (in Prozent der Gesamtdauer der Animation), sowie CSS-Eigenschaften, die zum definierten Zeitpunkt auf das Visuelement angewendet werden. Prinzipiell ist ein Keyframe wie folgt aufgebaut (weiterführende Hinweise sind entsprechender Literatur zu entnehmen):

Beispiele

Blinken:
0% {opacity:1;}
49% {opacity:1;}
50% {opacity:0;}
99% {opacity:0;}
100% {opacity:1;}
Sanft ein-/ausblenden:
0% {opacity:1;}
50% {opacity:0;}
100% {opacity:1;}
Sanft vergrößern/verkleinern:
0% {-webkit-transform: scale(1);}
50% {-webkit-transform: scale(0.75);}
100% {-webkit-transform: scale(1);}
Um 360 Grad rotieren und Hintergrundfarbe von rot nach blau überblenden:
0% {-webkit-transform: rotate(0deg); background:#ff0000;}
100% {-webkit-transform: rotate(360deg); background:#0000ff;}

Verwendung von Animationen

In einer Visualisierung***b-0 können Visuelemente***1002 mit Hilfe von Animationen animiert werden. Die Zuweisung einer Animation zu einem Visuelement erfolgt mit Hilfe eines Designs***1003.