Tipps zur Webentwicklung

Bei einer Animation mittels CSS3 ist es möglich die volle Kontrolle über die Animation zu haben, welches jedoch auch mit einem Mehraufwand verbunden ist.
Für die Realisierung werden Keyframes festgelegt in welcher wiederum Transitions angelegt werden.
@keyframes "Test" {
0% { right:100px; }
50% { right: 75px; }
100% { right:150px; }
}
In dieser Animation "Test" wird am Anfang die Animation right auf 100px gesetzt. Nach 50% der Animationszeit (welches individuell und beliebig oft eingestellt werden kann) steht right auf 75px usw.
Während dieser Animationen können zusätzlich auch Funktionen wie beispielsweise ease-in gesetzt werden. Hierbei kann man auch eine Verzögerung der Animation (animation-delay) einfügen.

div {
animation-name: "Test";
animation-duration: 10s;
animation-delay: 3s;
}

Sobald die Animation gestartet wird passieren die ersten 3 Sekunden nichts anschließend springt das Element auf 100px . Daraufhin wird das Element in den vorhandenen 10 Sekunden nach den oben angegebenen Prozentzahlen animiert.

Bei einer Transition können die Elemente, beispielsweise durch Hover, zwischen verschiedenen Zuständen wechseln.
Beispiel:
a {
background: #f00;
transition: background 1s linear;
}

a:hover {
background-color: #00f;
}

In diesem Beispiel wird die Hintergrundfarbe über 1 Sekunde linear angepasst. Dies bedeutet, dass nach einer halben Sekunde ein Lila als Übergangsfarbe zu sehen ist.
Um ein Element drehen zu können, kann man folgenden Code benutzen:
div {
transition: transform 1s linear;
}
div:hover {
transform: rotate (360deg);
}
Statt linear kann beispielsweise auch

ease-in: langsamer Start
ease-out: langsames Ende

genutzt werden.

Kommen wir nun zur ersten Animationsmöglichkeit mithilfe von CSS3: der Transformation. Sie ist dafür gedacht Elemente frei in der Fläche verändern zu können. Mit der Notation "transform" können die Elemente beliebig gedreht, skaliert, verschoben oder gestaucht werden.
Die verschiedenen Transformationen werden nun näher erläutert:

transform: rotate(45deg);
Hier wird das Element im Uhrzeigersinn um 45° gedreht.

transform: scale(1.5);
Das Element wird auf 150% skaliert.

transform: translate(100px, 50px)
Durch die Transformation translate wird das Element in x und y Richtung verschoben.

transform: skew(15deg, 15deg)
Hierdurch wird das Element um 15° schräggestellt.

Diese Angaben können in CSS3 beliebig kombiniert werden, sodass ein Element verschoben, skaliert und beispielsweise gedreht werden kann. Diese Transformationen findet häufig im 2dimensionalen Raum statt.

Flash, Javascript und Co. bekommen Konkurrenz für die Animationsmöglichkeit in Webseiten. Mithilfe von CSS3 können Webentwickler nun Webseitenprojekte attraktiver machen. Der Vorteil gegenüber Flash - das HTML bleibt suchmaschinentauglich und barrierefrei.
Von nun an können Navigationsstrukturen von oben nach unten aufgeklappt werden ohne JavaScript dabei zu benutzen.
Momentan gibt es drei Spezifikationen für die Animationsvielfalt mit CSS3:
CSS 2D Transforms, CSS Transitions und CSS Animation
Auf diese werde ich im Folgenden näher eingehen...

test...