quicktip CSS-Code einsparen bei den css-Animationen

CSS-Code einsparen? Immer gut! Ein kurzer Tip zu den CSS Animationen, auf den Lea Verou bereits im Dezember 2012 hingewiesen hat, mir aber bisher noch nicht bewusst war.

Bei den @keyframes Animationen muss man nicht zwingend den Status 0% und 100% oder from und to definieren, wenn dieser dem Wert der Eigenschaft des animierten Elements entspricht.

@keyframes deineanimation {
from { Eigenschaft: Wert; }
50% { Eigenschaft: Wert; }
to { Eigenschaft: Wert; }
}

#DeinAnimiertes Element {
/* ... */
animation: deineanimation .5s infinite;
}

Der „from“-Zustand wird dynamisch von den Browsern erzeugt, hier reicht dann:

@keyframes deineanimation {
to { Eigenschaft: Wert; }
}

Schon ausprobiert?