PURE CSS ART GALLERY

Loading artwork...

Rachel Bull

Using CSS animation to change the background gradient using opacity changes and key-frames

Edit on Codepen

Async `<link>`

Total

…s

Download

Start: …ms

Duration: …ms

Render

Start: …ms

Duration: 1…ms

localStorage

Total

…s

Download

Start: …ms

Duration: …ms

Render

Start: …ms

Duration: 1…ms

Cache-API

Total

…s

Download

Start: …ms

Duration: …ms

Render

Start: …ms

Duration: 1…ms

Browser	OS	Async	localStorage	Cache-API	Tests	Improvement
Chrome 94.0	Windows 10 64-bit	235.01ms	1.26ms	6.40ms	13	-
Chrome 94.0	OS X 10.15.7 64-bit	302.37ms	0.93ms	9.53ms	3	-
Chrome 95.0	Windows 10 64-bit	204.20ms	1.63ms	5.17ms	3	-
Firefox 93.0	Ubuntu 64-bit	596.50ms	3.50ms	31.50ms	2	-
Safari 14.1.2	iOS 14.7.1	204.50ms	1.00ms	5.00ms	2	-
Chrome 91.0	OS X 10.15.7 64-bit	288.10ms	0.90ms	8.30ms	1	-
Safari 14.0.3	OS X 10.15.6	112.00ms	1.00ms	2.00ms	1	-
Chrome 94.0	OS X 10.14.6 64-bit	305.80ms	2.00ms	18.00ms	1	-
Chrome 93.0	Windows 10 64-bit	123.20ms	0.70ms	3.30ms	1	-
Chrome Mobile 94.0	iOS 14.8	160.00ms	1.00ms	6.00ms	1	-
Safari 14.1.1	OS X 10.15.6	319.00ms	3.00ms	15.00ms	1	-
Firefox 78.0	Linux 64-bit	38.00ms	2.00ms	5.00ms	1	-
Firefox 93.0	Windows 8.1 64-bit	357.00ms	5.00ms	12.00ms	1	-
Firefox 93.0	Windows 10 64-bit	623.00ms	2.00ms	20.00ms	1	-
Chrome Mobile 94.0	Android 11	128.20ms	1.80ms	12.70ms	1	-
Chrome 94.0	Linux 64-bit	552.40ms	0.70ms	23.30ms	1	-
Chrome 94.0	null	89.00ms	0.00ms	200.00ms	1	-
Chrome 95.0	OS X 10.15.7 64-bit	505.40ms	0.80ms	5.60ms	1	-