1. Otevři si soubor moje-styly.css a doplň ho podle následujících instrukcí. V celém cvičení není potřeba upravovat žádné jiné soubory.

1. Vytvoř animaci, která bude s prvkem .digitalni__dvojtecka blikat.

   1. Využij vlastnost opacity, která má výchozí hodnotu 1. Pro zneviditelnění prvku nastav 0.

   2. Animaci nastav dobu trvání na jednu sekundu.

   3. Nech ji běžet do nekonečna.

   

2. Nech dvojtečku blikat bez prolínání.

   

Hodiny budou stále ukazovat 12:00, resp. 12:00 a 12 00. Tím se netrap. Pro změnu cifer podle aktuálního času by byl potřeba JavaScript, který není náplní tohoto cvičení.

1. Vytvoř animaci, která bude otáčet s vteřinovou ručičkou .analogove__vterinova.

   • Animace by neměla nikdy skončit. Nech ručičku točit neustále dokola.

   • Každá sekunda by měla být stejně dlouhá. Pozor na to, že animace jsou ve výchozím chování pomalé na začátku a na konci.

   • Na zkoušku zrychli animaci 10×. Jedna otáčka by tedy měla trvat 6 sekund.

   

2. Doplň podobnou animaci i pro minutovou ručičku .analogove__minutova.

   • Minutovou i vteřinovou animaci zrychli 100× proti reálnému času.

   

3. Doplň točení i hodinové ručičky .analogove__hodinova.

   • Všechny ručičky zrychli 1000×.