Výkon animací s transition: all

Pomocí CSS vlastnosti transition jde snadno vytvářet plynulé přechody mezi stavy přímo v CSS.

Následující kód způsobí, že po najetí bude odkaz plynule přebarven z červené na modrou:

a {
  color: red;
  transition: color .3s;
}
a:hover {
  color: blue;
}

Při animování většího počtu CSS vlastností jde uvést klíčové slovo all:

transition: all .3s;

Odpadá tak nutnost vyjmenovávat více vlastností, co se mají animovat.

transition: color .3s, opacity .3s, background-color .3s

Rychlost

Mohlo by se zdát, že vyjmenování všech vlastností, které se mají animovat, bude úspornější k systémovým prostředkům.

Podle mých testů (při měření v DevTools → Timeline) je ale rozdíl mezi vyjmenováním hodnot a použitím all naprosto zanedbatelný, navíc použití all je nepatrně rychlejší.

Zdá se tedy, že prohlížeče dokáží rozpoznat, které vlastnosti je možné animovat a zároveň u nich nastala změna.

Výhody transition: all

Otázka výkonu je tedy zanedbatelná.

Zajímavější je:

1. stručnější zápis – není potřeba všechny vlastnosti vyjmenovávat,

2. společná délka animace – většinou je žádoucí mít všechny přechody stejně dlouhé; potom není nutné dobu uvádět duplicitně,

3. automatické přechody – po přidání nové animovatelné vlastnosti bude automaticky animovaná

Proč nepoužívat transition: all

Důvody, proč se automatickému animování všeho co jde vyhnout, plynou z podstaty chování transition: all.

1. Potřeba animovat jen něco. Použití all může zanimovat i vlastnosti, které se animovat nemají.

2. Animovat různé vlastnosti různou dobu.

3. Při vyjmenování vlastností může být kód čitelnější (je jasné, co má autor zájem animovat).