CSS3 - Keyframe Animationen, Transitions und co. für euch erklärt
Mit CSS3 kommen einige sehr nützliche und coole Eigenschaften zum alternativen CSS dazu. Abgerundete Ecken erzeugt man schlicht mit einer Zeile Code. Oder animiert Elemente ganz simpel ohne Javascript. So schön und einfach das ganze auch klingt, muss man sich vor dem Anwenden der Eigenschaften immer über die Browserunterstützung der Eigenschaften informieren, da noch nicht alle Browser die neuen CSS3 Eigenschaften unterstützen. Ich empfehle immer einen Fallback für die Eigenschaften zu haben.
Wichtig: Um den Lerneffekt zu steigern könnt ihr meine Beispiele kopieren und selber Lokal auf dem Rechner ausprobieren oder gerne auch Online Tools wie JSFiddle brauchen.
Überall wo im Code MENTION=1053529 erwähnt wird, ist ein @ gemeint.
Welche Eigenschaften sind neu dazugekommen?
- transition
- border-radius
- box-shadow
- text-shadow
- opacity
- rgba colors
- background-clip
- keyframe animations
- rotate
- gradient
Es gibt noch einige mehr… Ich wollte jetzt nicht alle aufzählen, doch die oben stehenden sind so ziemlich die meinst gebrauchten CSS3 Eigenschaften. Ich persönlich finde “transitions”, “keyframe animations”, “box-shadow” und “border-radius” die besten Eigenschaften von CSS3. Deshalb stelle ich euch diese mal kurz vor und erkläre wie sie funktionieren.
Transitions
Diese CSS3 Eigenschaft macht nichts anderes als einen flüssigen Übergang zwischen den verschiedensten anderen Eigenschaften zu erschaffen welche durch CSS-Events wie hover ausgelöst werden können.
Beispiel
HTML Code:
<div class="box"></div>
Code:
.box {
width: 100px;
height: 100px;
background-color: black;
transition: all 1s ease;
}
.box:hover {
width: 200px;
background-color: orange;
}
Optionen
Mit dem Wert “all” spreche ich alle Eigenschaften an die sich beim hovern des Elements verändern. Ich könnte auch “background-color” als Wert nehmen und somit nur die Hintergrundfarbe flüssig/animiert ändern lassen. Mit dem Wert “1s” sage ich schlicht wie lange der Übergang dauern soll. Der letzte Wert “ease” sagt mit welcher Geschwindigkeit bzw. mit welchem Animations Still der Übergang passiert. Es gibt verschiedene Geschwindigkeiten die man brauchen kann.
Geschwindigkeiten bzw. Stille
- ease (Start : langsam Mitte: schnell Ende: langsam)
- ease-in (Start: langsam)
- ease-out (Ende: langsam)
- ease-in-out ( Start & ende: langsam )
- linear ( Start – ende: gleiche Geschwindigkeit )
Keyframe Animation
Diese neue Eigenschaft macht es uns möglich Elemente ohne Javascript zu animieren. Jedoch muss man beachten welche Browser und Browser-Versionen diese Eigenschaft unterstützt.
Beispiel
HTML Code:
<div class="box"></div>
Code:
.box {
width: 100px;
height: 100px;
background-color: black;
position: relative;
animation:myani 10s ease;
}
[MENTION=1053529]keyframe[/MENTION]s myani
{
0% {background: red; left:0px; top:0px;}
25% {background: orange; right:0px; top:0px;}
50% {background: black; left:200px; top:500px;}
75% {background: yellow; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
Optionen
In der Eigenschaft “animation” gebe ich die Grundinformationen der Animation an, wie Beispielsweise der erste Wert “myani”. Der erste Wert “myani” ist der Animationsname. Der zweite Wert “10s” sagt wie lange die Animation dauern soll. Der dritte Wert sagt wieder mit welcher Geschwindigkeit die Animation passiert. Die Geschwindigkeiten sind die selben wie im ersten Beispiel. Siehe Transitions.
Keyframes
In der Eigenschaft Keyframes hält man die Navigation der Animation fest. Als erstens sagt man für welche Animation die Keyframes gelten sollen. Das macht man indem man neben der Eigenschaft [B @
s[/B] den Animationsnamen angibt den man in der Eigenschaft Animation angegeben hat. Nun gibt es zwei verschiedene Arten Keyframes festzuhalten. In meinem Beispiel habe ich die Art gebraucht, wo man sagt wen du 25% der Animation erreicht hast mach das und dies. Die Zahlen können beliebig ersetzt werden. Man beachte 0 ist der Start und 100 das Ende. Die zweite Möglichkeit wäre:Code:
[MENTION=1053529]keyframe[/MENTION]s myani
{
from{background-color:red;}
to{background-color: yellow;}
}
Weitere Animation properties/werte
- animation-delay
- animation-iteration-count
- animation-direction
- animation-play-state
Box Shadow
Box Shadow einer der besten Eigenschaften die CSS3 mit bringt. Man kann mit nur einer Zeile Code coolen Schatten für boxen generieren lassen.
Beispiel
HTML Code:
<div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div>
Code:
.box1{
width: 100px;
height: 100px;
background-color: black;
margin: 100px;
float:left;
box-shadow: -1px 2px 22px 0px rgba(50, 50, 50, 0.58);
}
.box2{
width: 100px;
height: 100px;
background-color: black;
margin: 100px;
float:left;
box-shadow: -29px 44px 22px 0px rgba(50, 50, 50, 0.58);
}
.box3{
width: 100px;
height: 100px;
background-color: black;
margin: 100px;
float:left;
box-shadow: 7px -10px 30px 0px rgba(50, 201, 201, 0.5);
}
.box4{
width: 100px;
height: 100px;
background-color: black;
margin: 100px;
float:left;
box-shadow: -71px -25px 30px 0px rgba(254, 201, 201, 1);
}
Wie man im Ergebnis sieht, kann man mit einer Zeile Code coolen Schatten generieren lassen.
Den ersten Wert den man angibt ist die X-Achse Position des Schattens. Der zweite Wert die Y-Achse. Mit dem dritten Wert sagt man wie stark der Blur sein soll. Und als letztes gibt man noch die Farbe des Schattens an.
Border Radius
Mit dieser Eigenschaft können wir abgerundete Ecken erstellen. Es ist nun eifach ganze Kreise mit CSS zu machen. Da man früher mit Bilder schaffen musste um kreise zu generieren erspart diese Eigenschaft einem die ganze Arbeit.
Beispiel
HTML Code:
<div class="box"></div> <div class="box-two"></div> <div class="box-three"></div>
Code:
.box {
width: 100px;
height: 100px;
background-color: black;
border-radius: 10px;
}
.box-two {
width: 100px;
height: 100px;
background-color: black;
border-radius: 30px;
}
.box-three {
width: 100px;
height: 100px;
background-color: black;
border-radius: 90px;
}
Als Wert gibt man einfach die grösse an, die man abgerundet haben möchte.
Abschluss
Ich hoffe ich konnte euch mit diesem Post einen kleinen Einblick gewähren. Am besten kopiert ihr meine Beispiele und versucht eigene Sachen zu kreieren.
Falls ihr Fragen oder Anregungen habt stehe ich gerne zur verfügung.
Weitere Tutorials
Ich habe nicht all zu lange her ein Tutorial über Web - Storage gemacht. Falls du dich interessierst, schaue einfach in dieser Sektion nach meinem Namen und du wirst schnell fündig.
Lehrreiche Grüsse
samkeez
