CSS-Animation

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 colorize {
  0% {
    fill: #5cd689;
    stroke: #5c78d6;
    stroke-width: 4;
  }
  10% {
    fill: #9dd65c;
    stroke: #5c9fd6;
    stroke-width: 4;
  }
  20% {
    fill: pink;
    stroke: #5cd697;
    stroke-width: 4;
  }
  30% {
    fill: #5cd6c6;
    stroke: #5cd4d6;
    stroke-width: 2;
  }
  40% {
    fill: #d65cc0;
    stroke: #d65cb8;
    stroke-width: 2;
  }
  50% {
    fill: honeydew;
    stroke: #5cd672;
    stroke-width: 3;
  }
  60% {
    fill: mistyrose;
  }
  70% {
    fill: #cc3353;
    stroke: #d6cc5c;
    stroke-width: 1;
  }
  80% {
    fill: #5cd6be;
    stroke: #5cd4d6;
    stroke-width: 2;
  }
  90% {
    fill: #91d65c;
    stroke: #5cd664;
    stroke-width: 1;
  }
  10% {
    fill: #5c72d6;
    stroke: #d65ca9;
    stroke-width: 2;
  }
}

@keyframes stroke

@keyframes stroke {
  0% {
    stroke-width: 3;
    stroke: #ff9255;
  }
  100% {
    stroke-width: 9;
    stroke: white;
  }
}

@keyframes sway

@keyframes sway {
  0% {
    transform: rotate(2deg) translateY(5px);
  }
  100% {
    transform: rotate(-2deg) translateY(-5px);
  }
}

@keyframes mini-sway

@keyframes mini-sway {
  0% {
    transform: rotate(0.5deg) translateY(3px);
  }
  100% {
    transform: rotate(-0.5deg) translateY(-3px);
  }
}

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;