Rychlost a náročnost 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).

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Četnost CSS vlastností

Nejpoužívanější CSS vlastnosti

Žebříček CSS vlastností dle jejich četnosti na webových stránkách.

Jak zakázat označování textu

Zakázání označování textu

Standardně jde na webu označovat text. Jak jeho výběru myší zabránit?

Margin: auto

Psát margin: auto, nebo margin: 0 auto?

CSS konstrukce margin: auto se obvykle používá pro vodorovné centrování bloku.

Skloňování v CSS

„Programování“ v HTML a CSS

I bez úprav logiky serverového skriptu lze lecčeho dosáhnout samotným CSS.

CSS vlastnosti content a attr

Úprava obsahu pomocí content a attr

Pomocí CSS vlastnosti content a funkce attr lze ovlivňovat z CSS výsledný textový obsah webu.

Komentáře