Wie man mit CSS animiert

Veröffentlicht: 2014-12-27

Wir haben uns ziemlich daran gewöhnt, Animationen auf Websites zu sehen und die Energie und Vielfalt zu genießen, die sie in das Webdesign bringen. Sie sind ein Blickfang, eine großartige Möglichkeit, einer Website ein gewisses visuelles Interesse zu verleihen, und machen das Erlebnis für Ihre Benutzer im Allgemeinen spannender.

Während dies traditionell mit GIFs, SVGs, WebGL und Hintergrundvideos erreicht wird, können Animationen auch effizient mit CSS erstellt werden. Die Browserunterstützung für CSS-Animationen hat sich stark verbessert und wird immer beliebter – kompatible Browser umfassen Firefox 5+, IE 10+, Chrome, Safari 4+ und Opera 12+.

Heute führe ich Sie mit einer Schritt-für-Schritt-Demo durch die Grundlagen der Erstellung einer CSS-Animation. Bleiben Sie danach in der Nähe und sehen Sie sich fünf Beispiele für Animationen an. Sie können all diese Ideen verwenden, um Animationen für Ihre eigenen Projekte zu erstellen!

Grundlagen der CSS-Animation

Natürlich ist es wichtig, die Grundlagen der Funktionsweise von Animationen zu behandeln, bevor wir uns mit den fünf lustigen CSS-Animationen befassen.
Beispielsweise sind Keyframes eine Schlüsselkomponente für CSS-Animationen. Sie kennen diesen Begriff vielleicht, wenn Sie mit Adobe Flash gearbeitet haben oder Erfahrung mit der Videobearbeitung haben. In diesem Fall ist der Begriff Keyframe genau das, was Sie denken würden: Es ist eine Möglichkeit, eine bestimmte Aktion anzugeben.

Möglicherweise sind Sie schon einmal auf @keyframes in einem CSS-Stylesheet gestoßen. Innerhalb dieses @keyframes definieren Sie die Stile und Phasen für die Animation. Hier ist ein großartiges Beispiel für einen Fadeout-Effekt:

@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

Zu den Grundlagen des soeben erstellten Fadeout-Keyframes gehören:

Ein aussagekräftiger Name: in diesem Fall fadeOut.
Phasen der Animation: Von wurde auf 0 % und Bis auf 100 % gesetzt.
CSS-Stile, die in jeder Phase angewendet werden.

Standardmäßig ist Von 0 % und Bis 100 %, da in diesem Beispiel keine anderen Phasen angegeben sind.

Bestimmte Aktionen mit Animationsuntereigenschaften

Wir müssen etwas mehr tun, um Dinge zu stylen – wir müssen die animation mit Untereigenschaften stylen. Wenn Keyframes definieren, wie die Animation aussehen wird, definieren Untereigenschaften der Animation spezifische Regeln für die Animation. Mit diesen können Sie das Timing, die Dauer und andere wichtige Details zum Ablauf der Animationssequenz konfigurieren.

Die Animationseigenschaft wird verwendet, um @keyframes innerhalb eines CSS-Selektors aufzurufen. Animationen können und werden oft mehr als eine Untereigenschaft haben. Hier sind Beispiele für Untereigenschaften:

Zusammenarbeit mit einem Motion-Graphics-Künstler

Nichts kann Ihre Designs so lebendig machen wie Animationen. Aber wenn Sie noch nie mit einem Animator oder Motion-Graphics-Künstler zusammengearbeitet haben, kann sich Bewegung wie eine fremde Welt anfühlen. Wenn Sie an p denken ...

Animationsname: Name der @keyframes at-Regel, die die Keyframes der Animation beschreibt. Der Name fadeOut im vorherigen Beispiel ist ein Beispiel für animation-name.
Animationsdauer: Zeitdauer, die eine Animation benötigen sollte, um einen vollständigen Zyklus abzuschließen.
Animation-Timing-Funktion: Timing der Animation, insbesondere wie die Animation durch Keyframes übergeht. Diese Funktion hat die Fähigkeit, Beschleunigungskurven zu erstellen. Beispiele sind „linear“, „ease“, „ease-in“, „ease-out“, „ease-in-out“ oder „cubic-bezier“ .
Animationsverzögerung: Verzögerung zwischen dem Laden des Elements und dem Beginn der Animation.
Animation-Iteration-Count: Anzahl der Wiederholungen der Animation. Möchten Sie, dass die Animation für immer weitergeht? Sie können unendlich angeben, um die Animation endlos zu wiederholen.
Animationsrichtung: ob die Animation bei jedem Durchlaufen der Sequenz die Richtung wechseln oder zum Startpunkt zurückkehren und sich wiederholen soll.
Animationsfüllmodus: Werte, die von der Animation sowohl vor als auch nach der Ausführung angewendet werden.
Animation-Play-State: Mit dieser Option können Sie die Animationssequenz anhalten und fortsetzen. Beispiele sind keine, vorwärts, rückwärts oder beides .

Alles zusammen für die beste Browserunterstützung

Hier ist viel los, und die Terminologie kann etwas verwirrend sein. Aber wir wissen jetzt, dass Keyframes definieren, wie die Animation aussehen wird, sowie verschiedene Animationsphasen, und dass die Animationseigenschaft Untereigenschaften verwendet, um Animationsoptionen wie Verzögerung, Richtung, Timing usw. zu definieren.

Sie sind wahrscheinlich mit Hersteller- oder Browser-Präfixen vertraut – diese sind notwendig, wenn Sie mit Animationen arbeiten. Wir müssen sicherstellen, dass wir die beste Browserunterstützung haben. Hier sind die Standard-Browser-Präfixe:

Chrome & Safari: -webkit-
Firefox: -moz-
Internet Explorer: -ms-

Internet Explorer 10 erfordert kein Präfix für Übergänge, aber alle Transformationen erfordern das Präfix. Opera wird abgedeckt, da es WebKit-Stile erkennt.

Übergangsbeginn

-webkit-transition
-moz-transition
transition

Transformationsbeginn:

-webkit-transform
-moz-transform
-ms-transform
transform

Möchten Sie eine andere Art von Animation ausprobieren? Erstellen Sie ein GIF in Photoshop! Hier ist wie.

Fünf Animationen in Aktion

Nachdem wir nun die Grundlagen behandelt haben, erstellen wir Code, den Sie verwenden können!

Animation Eins: Kreis zu Quadrat
Animation-eins

Lassen Sie uns auf dieses erste Detail eingehen, damit wir sicherstellen können, dass wir alle Konzepte verstehen, die wir bisher behandelt haben. Die Animation beginnt als Kreis und verwandelt sich in ein Quadrat.

Das Erstellen eines div zu Beginn ist eine großartige Möglichkeit, die Animation zu testen:

&amp;lt;div class=”animationOne”&amp;gt;
&amp;lt;/div&amp;gt;

Lassen Sie uns jetzt unsere @keyframes einrichten. Diese Animation wird fünf Phasen haben, da ein Quadrat vier Seiten hat und wir einen Startpunkt von 0 % haben müssen. Verwenden Sie Präfixe, wie unten gezeigt, aber für den Rest des Tutorials halten wir es mit nur den Grundlagen einfach.

@-webkit-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@-moz-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@-ms-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

Lassen Sie uns nun einige Stile erstellen, um zu bestimmen, wie der Randradius in jeder Phase aussehen wird:

@keyframes circle-to-square {
0%  {
border-radius:50%;
}
25%  {
border-radius:50% 50% 50% 0;
}
50%  {
border-radius:50% 50% 0 0;
}
75%  {
border-radius:50% 0 0 0;
}
100% {
border-radius:0 0 0 0;
}
}

Fügen Sie nun die Eigenschaft background-color hinzu, um die einzelnen Phasen der Animation besser unterscheiden zu können:

@keyframes circle-to-square {
0%  {
border-radius:50%;
background-color: #6a9bea;
}
25%  {
border-radius:50% 50% 50% 0;
background-color: #90b3ec;
}
50%  {
border-radius:50% 50% 0 0;
background-color: #b0c7ec;
}
75%  {
border-radius:50% 0 0 0;
background-color: #cad7ec;
}
100% {
border-radius:0 0 0 0;
background-color: #dfe3e9;
}
}

Wenden wir abschließend die Animation auf das Test-Div an:

.animationOne {
width: 200px;
height: 200px;
-webkit-animation: circle-to-square 2s 1s infinite alternate;
-moz-animation: circle-to-square 2s 1s infinite alternate;
-ms-animation: circle-to-square 2s 1s infinite alternate;
animation: circle-to-square 2s 1s infinite alternate;
}

Die Animationseigenschaft wird normalerweise in Kurzschrift geschrieben, also ist hier, was tatsächlich im Code vor sich geht:

Der Animationsname lautet circle-to-square .
Die Animationsdauer beträgt 2s .
Die Animationsverzögerung beträgt 1s .
Die Anzahl der Animations-Iterationen ist infinite , sodass sie unbegrenzt fortgesetzt wird.
Und die Animationsrichtung ist alternate . Dies bedeutet, dass es von Anfang bis Ende abgespielt wird und zum Anfang zurückkehrt.

Animation 2: Rotation
Animation-zwei

Diese Animation ermöglicht die Drehung eines Objekts.

@keyframes full-rotate {
0%  {
transform: rotate(0deg);
}
25%  {
transform: rotate(45deg);
}
50%  {
transform: rotate(90deg);
}
75%  {
transform: rotate(135deg);
}
100% {
transform: rotate(180deg);
}
}

Um unsere Animationsprojekte getrennt zu halten, denken Sie daran, ein weiteres div für dieses zweite Beispiel zu erstellen. Ich habe eine Hintergrundfarbe hinzugefügt, weil wir für dieses Beispiel die Animation zum div selbst hinzufügen werden.

Die Dauer dieser Animation beträgt zwei Sekunden mit einer Verzögerung von drei Sekunden. Die Anzahl der Animations-Iterationen beträgt fünf, also wird dieses Projekt fünf Mal animiert, bevor es stoppt. Die Animation wird jedes ungerade Mal (1,3,5,… ) rückwärts und jedes gerade Mal (2,4,6,… ) in normaler Richtung abgespielt.

.animationTwo {
width: 200px;
height: 200px;
background-color: #ccc;
animation: full-rotate 2s 3s 5 alternate-reverse;
}

Animation 3: Erweitern und Flackern
Animation-drei

Dies ist eine großartige Animation für eine Schaltfläche, da sie im Vergleich zu anderen Elementen auf der Seite auffälliger und auffälliger ist. Es könnte sich auch lohnen, dies in einen :hover -Zustand aufzunehmen.

@keyframes button-flicker {
0% {
transform: scale(1);
}
30% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
50% {
transform: scale(1);
}
60% {
transform: scale(1);
}
70% {
transform: scale(1.05);
}
80% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}

.btn.pulse {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
animation: button-flicker 5000ms infinite linear;
}

Um dies testen zu können, benötigen wir das folgende Starter-Div:

.animationThree {
width: 200px;
height: 200px;
}

&amp;lt;div class=”animationThree&amp;gt;
&amp;lt;a class=&quot;btn pulse&quot; href=&quot;&quot;&amp;gt;Click me&amp;lt;/a&amp;gt;
&amp;lt;/div&amp;gt;

Animation 4: Textfolie
Fügen wir dem Text eine Animation hinzu. Dieses Projekt lässt Ihren Text einmal von links eingleiten.
Animation-vier

@keyframes slide-text {
from {
margin-left: 100%;
width: 200%;
}

to {
margin-left: 0%;
width: 100%;
}
}

h1.slide {
animation-name: slide-text;
animation-duration: 3s;
}

Animation 5: Einblenden
Animation-fünf

Haben Sie Überraschungsinhalte? Sehen Sie sich diese Einblendanimation für Inhalte an, die Sie zu einem späteren Zeitpunkt anzeigen möchten. Hier haben Sie viele Möglichkeiten: Das Einblenden kann schnell oder langsam sein, ein- oder mehrmals erfolgen und so weiter.

@keyframes fade {
from {
opacity: 0;
}

to {
opacity: 1;
}

}

.animationFive {
width: 200px;
height: 200px;
}

.animationFive img{
animation-name: fade;
animation-duration: 3s;
}

&amp;lt;div class=”animationFive”&amp;gt;
&amp;lt;img src=&quot;..&quot; /&amp;gt;
&amp;lt;/div&amp;gt;

CSS3-Animationen sind fantastisch, um Ihre Website in Bewegung und Groove zu bringen! Nachdem Sie nun die grundlegenden Konzepte zum Erstellen von Animationen kennen, sind die Animationsmöglichkeiten endlos. Was wirst du animieren?