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.