CSS3 Železnice

Do soutěže Machr na webdesign pro týden (pokud vím dobře) 15 na téma CSS3 animace jsem si připravil animovanou železnici. S touto železnicí jsem získal 97/100 bodů. Byl jsem na druhém místě.

Moje první animace

Kdybyjste se podívali na mojí první CSS3 animaci (misaz.wz.cz/pa­ges/vlak), zjistili byste, že se taky týkala železnice. To byla moje první animace, kterou jsem vytvořil před:

AAA

Tehdy jsem mohl použít obrázky, což byla výhoda. Nicméně vidíte že kola se i tehdy točila špatně .

Oproti mé první animaci je v té do soutěže velký rozdíl.

Scény animace

Animace má 2 scény.

Scéna 1 (v kódu 0)

Na první (nulté) scéně se vyrábí parní lokomotiva. Magnety snášejí postupně jednotlivé části. Celé to probíhá tak, že je spousta animací (@keyframes) s délkou 60s. a každá v jiných procentech snáší části lokomotivy.

Scéna 2 (v kódu 1)

Na druhé scéně jsou dvě koleje. Na první koleje jezdí (spíše se plazí) parní lokomotiva. Jen pro zajimavost, v prostředním voze cestuje Alenka (v říši divů nebo spíš vlaků), nicméně to je jen detail. Na druhé koleji pak jezdí moderní elektrická lokomotiva ř. 150.

Tímto jsem chtěl ukázat, že pomocí scén by v CSS3 šel udělat i animovaný film.

V budoucnu budu programovat aplikaci, která bude generovat právě takovéto animované filmy, jenže bych na to asi potřeboval pomoc a možná to hodím do společných projektů.

Nezbývá než Alence v druhém vozu popřát příjemnou cestu.

Galerie

Program byl vytvořen v roce 2013.