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.