Vytvořte skvělou spritovanou animaci Firefoxu s podporou CSS

Mozilla nedávno oficiálně oznámila Firefox OS a jeho partnery na Mobile World Congress a nemohl jsem být nadšenější. Firefox OS změní životy lidí v rozvojových zemích a doufejme, že si udělá jméno i v USA. Partnerský web byl také spuštěn s úžasnou animací Firefoxu, o které jsem si nemohl nechat ujít příležitost napsat – dovolte mi, abych vám ukázal, jak byla vytvořena!

Zobrazit ukázku

Než se dostaneme ke kódu, podívejme se na obrázek:

Obrázek má neuvěřitelných 7020 x 156 pixelů; jeden velký skřítek. Pro animaci je vyžadován pouze jeden HTML element:

<div id="foxtail"></div>

Když je DIV na místě, můžeme použít základní CSS k přidání obrázku na pozadí a rozměrů:

#foxtail {
	background: url(foxtail.png) 0 0 no-repeat;
	width: 156px;
	height: 156px;
}

Posledním krokem je periodická aktualizace pozice pozadí prvku DIV, aby se vytvořil vzhled animace prostřednictvím spritu. Animaci lze vytvořit pouze pomocí CSS, jak sdílí Luke Stevenson:

@keyframes animate-tail {  
    0% {background-position: -6864px 0; }
    100% {background-position: 0 0;}
}

#foxtail {
  animation: animate-tail 3.75s steps(44) infinite;
}

Krásné umělecké dílo od Luka – pomocí kroků CSS se přesuňte na každou pozici! Animace může běžet donekonečna, vrátit se do původní polohy na pozadí a začít znovu. V případě, že potřebujete podporovat starší prohlížeče, můžeme použít trochu jQuery a animační utilitu sprite Spritely:

jQuery("#foxtail").sprite({ fps: 12, no_of_frames: 44, rewind: true });

Spritely API umožňuje jednoduché animace sprite s maximální kontrolou rychlosti a přehrávání.

Zobrazit ukázku

Mohl bych ztrácet čas říkat, jak je tato animace žhavá, ale není to třeba - už to vidíte! Lukův úžasný příspěvek nám umožňuje vyhnout se nadýmání jQuery a JavaScriptu dohromady, ale pro starší prohlížeče je stále k dispozici řešení.