Diskuze: Problém s výkonem při animaci průhlednosti v css3

HTML a CSS Webdesign Problém s výkonem při animaci průhlednosti v css3 American English version English version

Avatar
Nikola Sterziková (PaNika):

Ahoj,
měla bych dotaz ohledně optimalizace výkonu css animací průhlednosti.
Mám udělat responzivní web (zde je ukázka: http://microsite.asp2.cz/ ) kde budou tyto animace:

  • animuje se kreslení drátěného modelu molekuly a animace jde "prostředkem galaxie" (tedy musím mít ještě jednu vrstvu části galaxie nad všemi ostatními prvky)
  • po vykreslení se drátěný model prolne se skutečnou molekulou
  • po té se molekula prolne s logem baňky
  • pak by měly pokračovat ještě další prolínání...

Animace jsem uděla v css pomocí transition

.fadeIn{
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    -webkit-transition: opacity 10s ease;
    -moz-transition: opacity 10s ease;
    -ms-transition: opacity 10s ease;
    -o-transition: opacity 10s ease;
    transition: opacity 10s ease;

}

Problém je, že se to na mobilu hrozně seká a obrázky problikávají.

Dá se ta animace nějak jinak optimalizovat, aby se to nesekalo nebo to optimalizovat nelze vzhledem k velikosti obrázků?

(zkoušela jsem i animaci přez jQuery fadeIn/Out, ale také se to sekalo.)

Díky moc
PaNika

PS: animace kreslení čar molekuly nefunguje v IE, to vím, budu řešit jinak ;-)

 
Odpovědět 9.4.2015 17:33
Avatar
Samuel Illo
Redaktor
Avatar
Odpovídá na Nikola Sterziková (PaNika)
Samuel Illo :

Optimalizácia v CSS možná nie je.
Mne to ide v mobile úplne plynule (až prekvapivo). Problém môže nastať u menej výkonných zariadení, pretože animácia prebieha na viacerých obrázkoch, čo je výkonovo náročné a niekde to može robiť problém.
Jediná možnosť ako zoptimalizovať výkon v tomto prípade je zmenšenie veľkosti/kvality obrázkov na rozumnú úroveň.

EDIT: Animácie, ktoré je možné spraviť pomocou CSS, je vždy pomocou CSS vyriešiť. JS bude vždy (i keď možno zanedbateľne) pomalší.

Editováno 9.4.2015 17:52
Nahoru Odpovědět 9.4.2015 17:50
www.samuelillo.com; lamka02sk(zavináč)samuelillo.com, www.point.samuelillo.com, www.csgorig.eu
Avatar
tomasmanhal
Člen
Avatar
Odpovídá na Nikola Sterziková (PaNika)
tomasmanhal:

Taky hlásím plynulý chod. Xiaomi Redmi Note LTE/4G.

Nahoru Odpovědět 9.4.2015 17:53
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Avatar
Nikola Sterziková (PaNika):

Díky za zkouknutí.

No, v tom případě mám místo mobilu vykopávku :-D
Domnívám se, že kB velikost obrázku na to nebude mít vliv. Pro viwport menší než 992px posílám obrázky o velikosti 150kB, 160kB a 36kB, problém je že při změně průhlednosti musí prohlížeč přepočítat ostatní prvky a asi na té mé staré vykopávce ten přepočet žel není tak hladký.

Každopádně díky za pomoc...

 
Nahoru Odpovědět 9.4.2015 18:02
Avatar
Odpovídá na Nikola Sterziková (PaNika)
Jan Kožnárek (Creevek_CZ):

Na mobilu mi to jede krásně. S potřebou optimalizovat CSS jsem se zatím nesetkal. Na druhou stranu mobilní zařízení jsou pořád lepší a lepší takže myslím že většina zařízení konce roku 2014 by to snad měli zvládnout. Možná jako řešení i když tedy dost nepraktické a zdlouhavé by bylo nějakým způsobem udělat z te animace gif. To by možná nemuselo být tak náročné.

Editováno 11.4.2015 4:49
Nahoru Odpovědět 11.4.2015 4:48
Lenost matka pokroku. Twitter: @Creevek_CZ
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.