SVG mit CSS animieren

Es gibt nicht nur eine Möglichkeit, SVG zu animieren. Es gibt das <animate>-Tag, das direkt in den SVG-Code kommt. Es gibt Bibliotheken, die dabei helfen, wie Snap.svg oder SVG.js. Wir werden uns eine weitere Methode ansehen: Inline-SVG (SVG-Code direkt in HTML) verwenden und die Teile direkt über CSS animieren.

Ich habe dies kürzlich persönlich ausprobiert, da meine Alma Mater Wufoo die Werbegrafiken, die wir hier schalten, auffrischen wollte. Mein neuestes Design hier verwendet viel SVG und ich dachte, dies wäre eine weitere perfekte Gelegenheit, es noch mehr zu nutzen.

Das fertige Produkt ist ziemlich einfach. Hier ist es

Siehe den Pen Wufoo SVG Ad von Chris Coyier (@chriscoyier) auf CodePen.

Schauen wir uns an, wie es gemacht wird.

1. Gestalten Sie die Anzeige / Haben Sie einen Plan

Dies mag wie ein Moment vom Typ „Wie man eine Eule zeichnet“ erscheinen, aber dieser Artikel handelt von Animation, also kommen wir so schnell wie möglich dazu.

Mein Plan für diese Anzeige war, eine super einfache Wufoo-Anzeige mit ihrem klassischen Logo, Farben und allgemeinem Branding zu erstellen. Dann fügen wir ein wenig Flair hinzu.

1. Lassen Sie die Buchstaben ein wenig von der Seite abprallen. Wufoo ist ein lustiges Wort, lassen Sie die Buchstaben ein bisschen Spaß haben.
2. Früher haben wir ein T-Shirt mit Dinosauriern auf der Vorderseite gemacht und auf der Rückseite stand „Schnell. Intelligent. Furchterregend.“ Das sind Eigenschaften von sowohl Dinosauriern als auch Wufoo, ganz zu schweigen von dem lustigen kleinen Wortspiel mit FURCHTeinflößend. Lassen Sie uns diese ein- und ausblenden.
3. Um die Verbindung mit dem Dinosaurier-Thema zu vervollständigen, wird ein T-Rex-Kopf neugierig von unten auftauchen und dann wegzoomen. Das Wort „Schnell.“ wird erscheinen, während er wegzoomt, was eine weitere schöne kleine Verbindung ist.

Ich habe alle Teile in Illustrator zusammengesetzt.

Beachten Sie, wie das Logo und der Slogan als Umrisse dargestellt sind. Das bedeutet, dass sie nur Vektorformen sind und perfekt so im SVG als <path>s gerendert werden. Der Text, den Sie dort sehen („Schnell.“), ist in Illustrator als Text belassen.

Wenn ich dies aus Illustrator speichere, wird dies als <text>-Element belassen.

2. Als SVG speichern

Illustrator kann dies direkt als SVG speichern

Sie können diese SVG-Datei in einem Code-Editor öffnen und den SVG-Code sehen

3. SVG bereinigen, Formen Klassen geben

Sie möchten es vielleicht durch SVGO laufen lassen, um es zu optimieren und DOCTYPE usw. zu entfernen. Aber wichtiger für diesen Beitrag ist, dass Sie den verschiedenen Formen Klassennamen geben möchten, damit wir sie in CSS auswählen und etwas damit tun können!

<svg version="1.1" id="wufoo-ad" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">

  <!-- background -->
  <rect class="wufoo-background" fill="#D03E27" width="400" height="400" />

  <!-- logo letters -->
  <path class="wufoo-letter" fill="#F4F4F4" d="M60.858,129...." />
  <path class="wufoo-letter" fill="#F4F4F4" d="..." />
     <!-- etc -->

  <!-- dinosaur -->
  <g class="trex">
     <path ... />
     <path ... />
  </g>

</svg>

4. Das SVG einfügen

Sie können dieses SVG direkt in das HTML kopieren und einfügen, wo die Anzeige erscheinen soll. Aber das würde die Vorlage wahrscheinlich nur verschmutzen. Höchstwahrscheinlich werden Sie einfach etwas tun wie

<aside class="sidebar">
  
   <div class="module module-ad">
      
       <?php include("ads/wufoo.svg"); ?>

   </div>

   ...

5. Animieren!

Jetzt haben wir diese Formen im DOM, die wir wie jedes andere HTML-Element ansprechen und gestalten können. Machen wir das.

Nehmen wir an, wir möchten dies als eine 10-sekündige Zeitleiste gestalten.

Wörter zuerst ein-/ausblenden

Das Erste, was passieren soll, ist die Sache mit „Schnell. Intelligent. Furchterregend.“ Jedes Wort wird eine Sekunde lang angezeigt. Also machen wir eine Animation, bei der das Wort 10 % der Zeit angezeigt wird

@keyframes hideshow {
  0% { opacity: 1; }
  10% { opacity: 1; }
  15% { opacity: 0; }
  100% { opacity: 0; }
} 

Dann zielen wir auf das erste Wort und lassen die Animation 10 Sekunden dauern (10 % davon sind 1 Sekunde)

.text-1 {
  animation: hideshow 10s ease infinite;
}

Die nächsten beiden Buchstaben werden zunächst versteckt (opacity: 0;) und verwenden dann exakt dieselbe Animation, nur mit einer Verzögerung, um etwas später zu beginnen

.text-2 {
  opacity: 0;
  animation: hideshow 10s 1.5s ease infinite;
}
.text-3 {
  opacity: 0;
  animation: hideshow 10s 3s ease infinite;
}

Die zusätzlichen 0,5 Sekunden bei jedem dienen dazu, die Ausblendzeit des vorhergehenden Wortes zu berücksichtigen.

Buchstaben-Sprünge

Sobald diese Buchstaben mit der Animation fertig sind, werden die Buchstaben in WUFOO ihren Jiggle-Jump-Effekt ausführen, so wie hier

Der Trick hierbei ist, dass wir die Animation nur 5 Sekunden lang machen, sie aber einmal vorwärts und einmal rückwärts laufen lassen. So passt sie in unsere 10-sekündige Zeitleiste, wird genau in die Mitte platziert, wo wir sie haben wollen, und wir müssen nur in eine Richtung skalieren, denn wenn sie sich umkehrt, wird sie zurückskaliert.

Jeder Buchstabe hat eine leichte Verzögerung, damit sie etwas versetzt passieren.

.wufoo-letter {
  animation: kaboom 5s ease alternate infinite;
  &:nth-child(2) {
    animation-delay: 0.1s;
  }
  &:nth-child(3) {
    animation-delay: 0.2s;
  }
  &:nth-child(4) {
    animation-delay: 0.3s;
  }
  &:nth-child(5) {
    animation-delay: 0.4s;
  }
}
@keyframes kaboom {
  90% {
    transform: scale(1.0);
  }
  100% {
    transform: scale(1.1);
  }
}

Das Obige ist aus Gründen der Kürze in SCSS geschrieben und enthält keine Präfixe (wie sie in der Produktion benötigt würden).

Ich denke, dass animation-delay eine Eigenschaft ist, die von einer nativen Randomisierung in CSS profitieren würde. Es wäre schön zu sehen, wie die Buchstaben jedes Mal ein wenig zufällig verzögert werden.

Dinosaurier zuletzt

Sobald die Wörter fertig sind, wird der Dinosaurier seinen Kopf herausstrecken. Auch wenn der Dinosaurier aus vielen <path>s besteht, können wir sie alle zusammen ansprechen, indem wir das <g> (Gruppe)-Tag ansprechen, das sie alle umschließt.

Da die Verwendung von translate zur Animation der Position besser ist, werden wir dies in den Keyframes tun

@keyframes popup {
  0% {
    transform: translateY(150px);
  }
  34% {
    transform: translateY(20px);
  }
  37% {
    transform: translateY(150px);
  }
  100% {
    transform: translateY(150px);
  }
}

Wir wollten, dass diese Animation etwa 3 Sekunden dauert. Sie läuft eigentlich in 10-Sekunden-Schleifen, aber Sie werden sie nur 3 Sekunden lang etwas tun sehen. Wenn translateY(150px) wirksam ist, ist der Dinosaurier so weit nach unten verschoben, dass Sie nichts sehen. Nach 37 % dieser Animation (etwa 3 Sekunden) werden Sie ihn langsam nach oben und dann schnell wieder nach unten fahren gesehen haben.

Wenn wir diese Animation anwenden, stellen wir sicher, dass

Der Dinosaurier zunächst versteckt ist
Die Animation verzögert ist, damit sie direkt nach dem Fade-in/Fade-out-Tanz der Wörter beginnt.

.trex {
  transform: translateY(150px);
  animation: popup 10s 6.5s ease infinite;
}

Der Dinosaurier taucht genau in der letzten Sekunde ab, was genau dann ist, wenn das Wort „Schnell.“ wieder auf dem Bildschirm erscheint (da alle Animationen auf infinite eingestellt sind, was sie für immer wiederholt). Das ist eine schöne kleine Synergie.

6. Machen Sie es zu einer responsiven / klickbaren Anzeige

Eines der schönen Dinge an SVG ist, dass es ohne Qualitätsverlust auf jede Größe skaliert werden kann. Um ein Inline-SVG wie dieses so zu skalieren, dass sein Seitenverhältnis beibehalten wird, können wir die alte gepolsterte Box-Technik verwenden.

<div class="wufoo-ad-wrap">
  <svg class="wufoo-ad">
     ...
  </svg>
</div>

.wufoo-ad-wrap {
  height: 0;
  padding-top: 100%;
  position: relative;
}
.wufoo-ad {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Die Idee hier ist, dass der „Wrap“ immer ein perfektes Quadrat relativ zu seiner Breite sein wird. Dann positionieren wir das SVG absolut in diesem perfekten Quadrat, das sich fröhlich selbst verkleinert.

Da dies eine Anzeige ist (die natürlich klickbar sein sollte), könnten Sie anstelle eines <div> für den Wrap ein <a href=""> verwenden, stellen Sie nur sicher, dass Sie es auf display: block; setzen.

---

Das finale Ding als Referenz.

Ich denke, es gibt eine Zukunft für diese Art von Dingen in der Display-Werbung, insbesondere aufgrund der CSS-Kontrolle und der einfachen, scharfen Größenanpassung.