Die Webdesignerin

Gesammelte Lieblingsseiten – schönes Webdesign.

CSS Animation

CSS-Animation

| Keine Kommentare

Raus in den Frühling

Eine kleine CSS-Animation mit Keyframes – kein Javascript, nur HTML, CSS und SVG. Die Grafik habe ich in Illustrator erstellt, möglichst einfache Formen, Pfade mit wenigen Ankerpunkten, noch besser sind Formen (shapes), wie Rechteck (rectancle) oder circle (Kreis).

Dann in Illustrator als SVG-Datei abspeichern. Direkt aus dem Kontextmenü hole ich den SVG-Code (/SVG-Optionen/SVG-Code). Der Code enthält noch Überflüssiges und muss auch für WordPress aufbereitet werden, damit der WP-Editor im Text-Mods damit klarkommt.

SVG-Otimizer
HTML Uglify

Die Blume wird mit 4 Keyframe-Animationen zum Leben erweckt.
@keyframes colorize

@keyframes stroke

@keyframes sway

@keyframes mini-sway

Diese werden einem HTML-Element zugeordnet.

div .aussen svg.flower { animation: sway 3s linear infinite alternate; }

Dabei gibt es ein paar CSS-Eigenschaften, die für das HTML-Element definiert werden müssen, damit die Animation funktioniert: auf jeden Fall der Name und die Dauer.

animation-name: sway

animation-duration: 3s

Und hier noch weitere Eigenschaften:

animation-timing-function: linear

animation-iteration-count: infinite

animation-direction: alternate

In Kurzform:

animation: sway 3s linear infinite alternate;

Susanne

Autor: Susanne

Als Web- und Grafikdesignerin bin ich immer auf der Suche nach Inspiration und neuen Ideen. Ich surfe im Internet und finde interessante Seiten. Besonders schöne Websites und aktuelle eigene Web-Projekte stelle ich hier kurz vor.

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.