Die Eigenschaft #transition erzeugt Übergänge, wenn sich bestimmte Eigenschaften von einem Element ändern.
Archive for the ‘Effekte’ Category
Pulsierendes Herz
Mehrere Elemente können gemeinsam animiert werden wenn ihre #animations aufeinander abgestimmt sind.
Animation
Animationen werden über Keyframes gesteuert.
Drop-Shadow
Effekte wie Weichzeichner, Helligkeit oder Kontrast mit CSS auf Elemente anwenden.
SVG Filter
Effekte wie Weichzeichner, Helligkeit oder Kontrast mit CSS auf Elemente anwenden.
Kombination
Effekte wie Weichzeichner, Helligkeit oder Kontrast mit CSS auf Elemente anwenden.
Sepia
Effekte wie Weichzeichner, Helligkeit oder Kontrast mit CSS auf Elemente anwenden.
Saturate
Effekte wie Weichzeichner, Helligkeit oder Kontrast mit CSS auf Elemente anwenden.
hue-rotate
Effekte wie Weichzeichner, Helligkeit oder Kontrast mit CSS auf Elemente anwenden.
Grayscale
Effekte wie Weichzeichner, Helligkeit oder Kontrast mit CSS auf Elemente anwenden.
Contrast
Effekte wie Weichzeichner, Helligkeit oder Kontrast mit CSS auf Elemente anwenden.
transition-timing-function
Die Tempokurve kann bei #transition und bei #animation genutzt werden.
ease-in-out und cubic-bezier
#ease-in-out hatgroße Ähnlichkeit mit der Tempokurve von #ease, der Mittelteil ist jedoch deutlich schneller. Mit #cubic-bezier können eigene Tempokurven erstellt werden.
ease-in und ease-out
#ease-in beginnt langsam beginnt und endet schnell. #ease-out verhält sich genau anders herum. #ease-out ist sollte häufig getestet werden. Der Benutzer hat sofort ein Feedback, da es sehr schnell beginnt und kann die Bewegung gut einordnen aufgrund es langsamen Finish. Bei #ease-in ist mitunter der langsame Start das Problem. Der Nutzende erwartet ein Ergebnise, die […]
CSS Filter
Mit der CSS Eigenschaft #filter können eine ganze Reihe von Effekten beliebigen Elementen zugewiesen und auch animiert werden. Es können mehrere Filter gleichzeitig zugewiesen werden.
Drehende Zahnräder
SVG können als Vektoren z.B. in Adobe Illustrator erzeugt und dort gespeichert worden. Dem so erzeugten #SVG können #class, #id oder #filter zugewiesen werden.
Transform in 3D
Die Klasse code-cube hat 6 Kinder. Jedes der Kinder ist im 3D Raum mit ein paar Werten für TRANSFORM so verschoben, dass ein Würfel entsteht. Die Klasse code-cube bekommt die Animation „spinning-code-cube“. Die Animation ist eine 3D Rotation. Die Kinder folgen der Animation. Das ist wie der Drehtisch im chinesischen Restaurant. Man dreht die Platte […]
linear und ease
Das Tempo des Abspielens einer #animation oder #transition kann beeinflusst werden.