Twitter “fav” animation

A cssanimation összerakta (via @TheHedgehog) HTML/CSS-ben is a Twitteren nemrég bevezetett látványos csillag animációt. Ez nem a Twitter implementációja, viszont egy remek trükk, hogyan tudunk egy, a frame-eket horizontálisan egymás mellé rakott képet visszajátszani animgif-szerűen.

Hogy miért? Mert például így lehet 24 bites alpha channeles képeket is csinálni, illetve lehet még akár vezérelni is. A dologban a megoldás az, hogy egy element backgroundját lehet animálni lépésekkel, így mondjuk egy hover állapot így írható le:

.fave:hover {
background-position: -3519px 0;
transition: background 1s steps(55);
}

Jópofa. (Mondjuk én a Twitter animációt már picit soknak érzem, de ez legyen az én bajom.) Arról sajnos nincs információ, hogy egy animációt, vagy képek sorozatát hogyan tudunk lapra helyezni, ha valakinek van erre vonatkozóan információja, igazán megoszthatná.