SVG Animation, Webdesign

CSS-Animation – die Schaukel

von admin vom

Meine Schaukel – vor Jahren mal in Flash animiert – wollte ich unbedingt als SVG-Datei zum Leben erwecken. Eigentlich gar nicht so kompliziert mit animate.css. Schwieriger war es, das Ganze in einem WordPress-Post hinzubekommen (Jetzt als CodePen).

AI-Vektorgrafik in SVG-Datei konvertieren

Die Illustrator-Datei kann in Illustrator in eine SVG-Datei umgewandelt werden. Die Vektorgrafik sollte so wenig Ankerpunkte wir möglich haben. Das Konvertieren geht relativ einfach über „Datei speichern“ als .SVG mit diesen Einstellungen:

ai-svg-convertieren

SVG-Code optimieren

Der so erzeugte SVG-Code (SVG-Datei in einem Editor öffnen) enthält viele überflüssige Elemente und ist noch weit entfernt von sauberem, optimiertem SVG-Code. Tipps für weitere Maßnahmen habe ich
in diesem Smashing-Magazine-Artikel gefunden.

Der SVG-Optimiser von Peter Collingridge ist genial. In einem Vorschaubild kann ich sehen, wie die Einstellungen das Endergebnis aussehen lassen.

petercollingridge.appspot.com/svg-editor

SVG-optimizer

SVG-Code inline in WordPress-Post einbinden

Für die Animation soll der SVG-Code inline eingebunden werden. Wenn ich den Code nicht auf einer Zeile im Editor einfügen kann, fügt WordPress Absätze und Zeilenumbrüche ein. Das zerstört leider meinen schönen SVG-Code und es bleibt nichts als eine leere weiße Fläche.

Einfügen von p- und br-Tags im WordPress-Texteditor verhindern

In der function.php diese Zeilen einfügen:

remove_filter( 'the_content', 'wpautop' );

remove_filter( 'the_excerpt', 'wpautop' );

Leben einhauchen – Animation mit animate.css

Natürlich gibt es wie immer unendlich viele Wege und Möglichkeiten, die zum Ziel führen. Diese Slideshow zum Thema kann ich nur empfehlen the-art-of-ui-animations

Für die Schaukel habe ich die CSS-Bibliothek animate.css genutzt.
Im Head-Element muss das Stylesheet eingebunden werden:

<head>
  <link rel="stylesheet" href="animate.min.css">
</head>

Und schon kann das gewünschte Element per CSS animiert werden:

<svg class="animated swing infinite" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0" y="0" width="251" height="367.3" viewBox="0 0 251 367.3" xml:space="preserve" enable-background="new 0 0 251 367.3">

Ausführlicher wird es hier beschrieben:
http://daneden.github.io/animate.css/

Nachtrag: Die Schaukelanimation war noch nicht optimal mit der Standardvorgabe von animate.css

Mit einem CSS-Generator habe ich die Animation angepasst. Der CSS-Code dazu:

.element-animation{
  animation: animationFrames linear 3s;
  animation-iteration-count: infinite;
  transform-origin: 0% 0%;
  -webkit-animation: animationFrames linear 3s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 0% 0%;
  -moz-animation: animationFrames linear 3s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 0% 0%;
  -o-animation: animationFrames linear 3s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 0% 0%;
  -ms-animation: animationFrames linear 3s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 0% 0%;
}

@keyframes animationFrames{
  0% {
    transform:  rotate(0deg) ;
  }
  34% {
    transform:  rotate(90deg) ;
  }
  67% {
    transform:  rotate(-90deg) ;
  }
  100% {
    transform:  rotate(0deg) ;
  }
}

@-moz-keyframes animationFrames{
  0% {
    -moz-transform:  rotate(0deg) ;
  }
  34% {
    -moz-transform:  rotate(90deg) ;
  }
  67% {
    -moz-transform:  rotate(-90deg) ;
  }
  100% {
    -moz-transform:  rotate(0deg) ;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    -webkit-transform:  rotate(0deg) ;
  }
  34% {
    -webkit-transform:  rotate(90deg) ;
  }
  67% {
    -webkit-transform:  rotate(-90deg) ;
  }
  100% {
    -webkit-transform:  rotate(0deg) ;
  }
}

@-o-keyframes animationFrames {
  0% {
    -o-transform:  rotate(0deg) ;
  }
  34% {
    -o-transform:  rotate(90deg) ;
  }
  67% {
    -o-transform:  rotate(-90deg) ;
  }
  100% {
    -o-transform:  rotate(0deg) ;
  }
}

@-ms-keyframes animationFrames {
  0% {
    -ms-transform:  rotate(0deg) ;
  }
  34% {
    -ms-transform:  rotate(90deg) ;
  }
  67% {
    -ms-transform:  rotate(-90deg) ;
  }
  100% {
    -ms-transform:  rotate(0deg) ;
  }
}