CSS3 Animationen

Veröffentlicht von Tudor - 26. Februar 2016

Mit Hilfe von CSS3 Animationen Keyframes, können Entwickler Animationen erstellen ohne Verwendung von jQuery/Javascript. In diesem folgenden Tutorial, werde ich erklären, wie man eine CSS3 Animationen erstellt.

css_animationen

Keyframes

Was sind Keyframes? Keyframes sind die Grundlage für eine CSS-Animation. Ein Keyframe definiert die Styles, die für eine Animation verwendet werden. Jedes Keyframe hat Stadien der Animation und jede Stufe der Animation wird als Prozentsatz dargestellt. 0% stellt den Anfangszustand der Animation dar. 100% entspricht dem Endzustand der Animation. (mehrere Stufen können dazwischen hinzugefügt werden: 30%, 40%, 50% usw.)

Einfache Demonstration

Durch die Erstellung einer einfachen Animation, schaffen wir die Grundlagen die Keyframes zu verstehen. Ich habe es “herzschlag“ genannt, weil die Animation wird die Herzschläge imitieren. Dieses keyframe wird 2 Stufen haben. In der ersten Stufe (0%), wird das Element bis auf 50 Prozent seiner Standardgröße skaliert mit Hilfe der CSS Transform-Scale. Auf der zweiten Stufe (100%) wird das Element auf bis zu 80 Prozent der Standardgröße skaliert.

@keyframes herzschlag {
  0%  { transform: scale(0.5,0.5); }
  100% { transform: scale(0.8,0.8); }
}

Hinweis: Dokumentation zur CSS—Transform Eigenschaft findest du hier Sobald die Stufen hergestellt wurde, werden die Eigenschaften(properties) für die Animation definieren. Für diese Demonstration werden wir 4 Properties verwenden:

  • animation-name – Der Name der Animation
  • animation-duration – Die Dauer der Animation (Sekunden oder Millisekunden)
  • animation-iteration-count – Definiert wie oft
  • animation-direction – Definiert die Richtung der Animation

Das Herz wird kontinuierlich schlagen mit Hilfe von animation-timing-function, animation-duration und animation-iteration-count wird es möglich sein die Animation konsistent zu machen. Alles zusammensetzen und wir werden dieses Code haben:

Fortgeschrittenere Demonstration (2D-Animation)

In dieser neuen Demonstration werden wir ein Männchen mit 4 Kugeln jonglieren lassen. Erster Schritt wäre die Einrichtung der Plattform, wo unsere Animation stattfindet wird. Die Animation wird in Bezug auf den Hintergrund, der fest stehen bleibt, jonglieren.

.szene {
  background-color: #9ec9bb;
  position: relative;
  height: 500px;
  width: 500px;
  margin:10% auto;
          
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;         
}
        
.figur {
  background-image: url("clown.png");
  width: 500px;
  height: 500px;
}

clown.png

Der nächste Schritt ist, sind die Bälle. Wir werden ein Haupt DIV einrichten, der die Größe der Kugel definieren wird und 4 weitere DIVS, die die Kugeln sein werden, jedes mit unterschiedlichen Farben.

.baelle {
  position:absolute;
  top: 0;
  left: 0;
  right: 0;
  margin-left: 48%;
  margin-top: 35%;
}
        
.baelle div {
  position:absolute;
  width:50px;
  height:50px;
            
  animation:jonglieren 2s linear infinite;
            
  -webkit-box-shadow: 0px 3px 6px 0px rgba(50, 50, 50, 0.3);
  -moz-box-shadow:    0px 3px 6px 0px rgba(50, 50, 50, 0.3);
  box-shadow:         0px 3px 6px 0px rgba(50, 50, 50, 0.3);        
}
        
.baelle div.red {
   background:red;
   border-radius: 50%;
}
        
.baelle div.blue {
   background:blue;
   border-radius: 50%;
   animation-delay:-.4s
}
        
.baelle div.yellow{
   background:yellow;
   border-radius: 50%;
   animation-delay:-.8s
}
        
.baelle div.green{
    background:green;
    border-radius: 50%;
    animation-delay:-1.2s
}

Sobald wir alles gesetzt haben, muss man als nächstes die Bewegung umsetzen. Dafür verwenden wir, wie oben schon erwähnt, die keyframes.

@keyframes jonglieren {
   0% {
     transform:translate(0);
 }
   10% {
     transform:translateX(50px) translateY(-100px);
 }
   5% {
     transform:translateX(110px) translateY(0px);  
 }
   40% {
     transform:translateX(50px) translateY(100px); 
 }
   50% {
     transform:translate(0);
 }
   60% {
     transform:translateX(-50px) translateY(-100px); 
 }
   75%{
     transform:translateX(-100px) translateY(0px);
 }
   85% {
     transform:translateX(-90px) translateY(100px);     
 }
   100% {
     transform:translate(0);
 }
}

Wie man sieht, wurde dieses Mal etwas anderes benutzt, das “transform: translate”. Was tut es? Diese Eigenschaft (property) sorgt für die Bewegung der Elemente. Die Transform-Eigenschaft (property) akzeptiert eine oder mehrere Funktionen und jedes wird einen oder mehrere Parameter haben. In der Translate-Funktion, werden zwei Parameter übergeben: die erste stellt Positionierung entlang der X-Achse (horizontal) dar, und der zweite Parameter die Positionierung entlang der Y-Achse (vertikal). Zur Messung werden Pixel(px) oder Prozentsätze(%) benutzt. Alles zusammensetzen und wir werden dieses Code haben: Welche Browser unterstützen diese Funktion? Hier klicken um es herauszufinden.

Das könnte Dich auch interessieren

Fakten über das Internet

Wie alt ist das Internet überhaupt? Wann wurde die erste E-Mail versendet und warum „surfen“ wird im Internet? Diese und weitere Fakten rund um das Interne...

„Klick mich!“ Dos and Don’ts für die Button-Gestaltung

Lichtschalter, Fernseher, Autos mit Start-Stopp Automatik... Alle diese Dinge werden über Tasten bedient. Genauso wie ich gerade auf die Tasten tippe, währen...

Performance Marketing – Performst du noch oder arbeitest du schon?

Ich bin seit kurzem als Performance Marketing-Managerin für die Media Favoriten tätig. Die Reaktionen darauf sind vielfältig, meist aber mit einigen Fragezei...