CSS3 Animation CSS Design

Mit CSS3 gute Animationen gestalten

Animationen erfahren derzeit im Webdesign eine Art der Renaissance. Es ist noch nicht sehr lange her, da wurden Animationen noch verschmäht. Sie galten als Dekoration ohne wirklichen Nutzen – unpraktisch und unnötig. Doch in den letzten Jahren zeigte sich ihr erneuertes Potential. Websites und deren Inhalte werden dadurch bereichert und wirken lebendiger. Darüber hinaus verbessern sie die Nutzererfahrung. CSS3 bietet einige Möglichkeiten, schnell und einfach interessante Animationen zu erstellen. Wie das geht, zeigen wir Ihnen hier.

 

Animationsmöglichkeiten

Auf Websites bezogen, sind Animationen nichts anderes als die Veränderung eines Objekts. Dies kann eine ganze Reihe an Formen einnehmen. Sei es die Bewegung eines Objekts von einem Punkt zum anderen, die Änderung der Form oder der Farbe eines Objekts, oder aber auch eine Kombination dieser Möglichkeiten. Grundlegend handelt es sich aber immer um eine Form des Bewegtbilds in mehreren Einzelschritten. CSS3 bietet zwei gute und einfache Möglichkeiten, Animationen zu erstellen.

 

Transitions

CSS Transitions ist die etwas simplere der beiden Varianten. Dabei gibt es jeweils einen zu definierendes Anfangs- sowie Endzustand, in den Objekt sich befindet. Es gibt dabei keine Zwischenschritte, sondern nur die Veränderung von Zustand ,,a” zu Zustand ,,b”. Ein Beispiel dafür wäre, einen Button die Farbe von Rot zu Violett wechseln zu lassen. Alternativ lässt sich neben der Hintergrund- und Textfarbe auch die Position des Elements ändern. Die Animation wird hier üblicherweise durch ein Mouseover eingeleitet. Diese Art der Animation bietet nur begrenzte Möglichkeiten, ist dafür aber umso leichter umzusetzen. Der entsprechende CSS-Code für Transitions könnte wie folgt aussehen:

.button {
  background-color: #333;
  transition-property: background-color;
  transition-duration: 1s;
}
.button:hover {
  background-color: #555;
}

,,property” ist das Element, das sich während der Animation ändert. Hier ist es die Hintergrundgarbe. Die Dauer der Animation beträgt eine Sekunde, festgelegt durch ,,duration”. Alternativ lässt sich der Code verkürzen, dies sähe dann folgendermaßen aus:

transition: background-color 1s;

Dem Code lassen sich noch zahlreiche andere Eigenschaften und Elemente hinzufügen, beispielsweise eine Verzögerung, bevor die Animation ausgeführt wird. Das zugehörige Code-element wäre dann mit ,,transition-delay” betitelt.

 

KeyframeanimationenCSS3 CSS Animation Code

Keyframeanimationen sind eine Spur komplexer, aber auch aufwendiger als Transitions. In die Animation lassen sich hier Zwischenstände der Animation einfügen.  Dies geschieht mittels Schlüsselbilder bzw. Keyframes. Zwar müssen auch ein Anfangs- wie ein Endzustand festgelegt werden, allerdings lassen sich im weiteren Verlauf Zwischenschritte einbauen, um der Animation mehr Vielfalt und Potential zu verleihen. Eine weitere Besonderheit ist, dass kein Mouseover von Nöten ist, um die Animation auszulösen. Keyframeanimationen können selbstständig und ohne vorherige Interaktion ausgelöst werden, wahlweise schon beim Aufrufen der Seite. Im ersten Schritt wird für Keyframeanimationen ein Code benötigt, in dem der Name der Animation sowie Anfangs- und Endzustand festgelegt werden:

@keyframes name-animation {
  from {
         // Eigenschaften am Beginn der Animation
       }
  to {
         // Eigenschaften am Ende der Animation
      }
 }

Wenn nun, wie es sich bei Keyframeanimationen anbietet, Zwischenschritte aka Keyframes eingefügt werden, werden diese in dem oben gezeigten Code zwischen Anfangs- und Endzustand platziert und mit prozentualem Fortschritt versehen. Dieser dient im Code als eine Art Zeitstempel, ab welchem Punkt der Animation er zum besagten Zustand wechseln soll. Mit lediglich einem Keyframe sähe der Code in etwa so aus:

@keyframes name-animation {
  0% {
    // Eigenschaften am Beginn der Animation
  }
  50% {
    // Eigenschaften in der Mitte der Animation
  }
  100%
    // Eigenschaften am Ende der Animation
  }
}

Wenn dieser Schritt befolgt ist, fogt ein neuer Code. Der im vorigen Code festgelegte Name wird im neuen Code aufgegriffen, um diesem Zugang zu den Eigenschaften der Animation zu verschaffen, wie etwa den Zwischenschritten. Ähnlich wie bei Transitions wird nun die Dauer der Animation definiert. Zusätzlich dazu wird bei Keyframes auch die Anzahl der Wiederholungen der Animation festgelegt (,,iteration-count”), da die meisten Keyframeanimationen automatisch ausgelöst werden. Zumeist werden diese in Dauerschleife gespielt, also mit unendlich vielen Wiederholungen versehen.

.name-selektor {
animation-name: name-animation;  // Name der Animation
animation-duration: 1s; // Dauer der Animation
animation-iteration-count: infinite; // Anzahl der Wiederholungen
}

 

Abschließend

Zwar wirkt es auf den ersten Blick, als wären Keyframes die einzig logische Wahl, jedoch sind diese sehr aufwendig in der Gestaltung, je nachdem wie komplex sie sind. Und je komplexer sie sind, desto mehr Rechenleistung wird Endgeräten abverlangt. Dies führt besonders bei Mobilgeräten oftmals zu erheblichen Performanceproblemen. Natürlich müssen Sie sich nicht unbedingt selbst jedes Mal eine neue Animationen zusammenbauen. CSS beispielsweise bietet auch viele Vorlagen in seinen Bibliotheken.

Sofern Sie also an einer ansprechenden Website interessiert sind, die Nutzern ein gutes Interneterlebnis bietet, können Sie durch Animationen von CSS3 nur profitieren. Umso mehr, wenn Sie die Codierung und Erstellung in kompetente Hände legen, weshalb Sie uns engagieren sollten!

Ihre Website schnell und DSGVO-konform

Noch mehr Kunden online erreichen?

Ihre Website schnell und DSGVO-konform