Tipps zur Webentwicklung

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.