CSS3 Animationen
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.
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.
Das könnte Dich auch interessieren
Die technische Seite von WordPress
Wie funktioniert WordPress aus technischer Sicht? WordPress generiert Websites dynamisch...
Social Media und dessen Auswirkung auf unser Leben
Social Media hat in der heutigen digitalen Ära einen tiefgreifenden Einfluss auf nahezu jeden Aspekt unseres alltäglichen Lebens. Von der Art und Weise, wie w...
Mythos CSS4: Warum es die neue Version nie geben wird
Die Menschen lieben es zu zählen. Alles muss Zahlen haben. So wird "Krieg der Sterne" zu "Star Wars: Episode IV", Graf Zahl singt fröhlich sein Liedchen und j...