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;
}

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.