Re:Show HN: Performance-focused pure CSS loading animations
by laumars on Tuesday March 24, 2015 @04:31PM
(#9259269)
I think you could make similar arguments against the use of CSS. eg:
- plays nicer on lower end hardware (I actually don't buy that CSS is smoother than GIF. I think it's 50/50 depending on how the GIF was designed (eg # frames, delay between frames, frame overlay method, etc), the hardware the GIF / CSS is rendered on, the browser running the CSS, etc.
- GIF works uniformly on all platforms (bar console-based browsers obviously hehe)
- and to expand on your second point, it doesn't seem like you're using alpha transparency on half your examples anyway.
Anyhow, it wasn't my intention to be negative. There's some stylish work there and it shows you've gone to a lot of effort. I particularly like the Pac-Man example. Unfortunately though (and to reiterate an early point) sadly quite a few examples failed to animate. Below is my full user agent string, and a map of the examples that worked and failed, in case it helps you with future developments:
Mozilla/5.0 (X11; Linux x86_64; rv:36.0) Gecko/20100101 Firefox/36.0
A A X X
X X A X
X X X X
X A A
A X X X
X X A A
X A A
A == Animated
X == not animated
== empty spot (failed animation?)
Re:Show HN: Performance-focused pure CSS loading animations
by exogen on Tuesday March 24, 2015 @04:33PM
(#9259285)
Unfortunately I'm not the OP. I only designed the unrelated demo in my comment (which does use alpha transparency btw to blend in with whatever background color/image one might use).
- plays nicer on lower end hardware (I actually don't buy that CSS is smoother than GIF. I think it's 50/50 depending on how the GIF was designed (eg # frames, delay between frames, frame overlay method, etc), the hardware the GIF / CSS is rendered on, the browser running the CSS, etc.
- GIF works uniformly on all platforms (bar console-based browsers obviously hehe)
- and to expand on your second point, it doesn't seem like you're using alpha transparency on half your examples anyway.
Anyhow, it wasn't my intention to be negative. There's some stylish work there and it shows you've gone to a lot of effort. I particularly like the Pac-Man example. Unfortunately though (and to reiterate an early point) sadly quite a few examples failed to animate. Below is my full user agent string, and a map of the examples that worked and failed, in case it helps you with future developments: