PURE CSS ART GALLERY

Loading artwork...

Rachel Bull

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

View original

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 91.0	Windows 10 64-bit	338.50ms	1.88ms	11.50ms	27	-
Chrome 89.0	Windows 10 64-bit	274.96ms	1.27ms	7.93ms	22	-
Chrome 90.0	Windows 10 64-bit	371.31ms	1.08ms	7.53ms	16	-
Chrome 91.0	OS X 10.15.7 64-bit	260.82ms	0.96ms	12.48ms	9	-
Chrome 90.0	OS X 10.15.7 64-bit	364.14ms	1.12ms	6.17ms	6	-
Firefox 84.0	Windows 10 64-bit	241.00ms	1.60ms	10.80ms	5	-
Chrome Mobile 87.0	iOS 14.4	291.20ms	1.20ms	8.00ms	5	-
Chrome 81.0	Linux 64-bit	319.66ms	1.28ms	103.25ms	4	-
Chrome 84.0	Windows 10 64-bit	444.17ms	1.68ms	33.81ms	4	-
Firefox 85.0	Windows 10 64-bit	534.50ms	3.00ms	24.50ms	4	-
Chrome 89.0	OS X 11.2.3 64-bit	271.16ms	0.99ms	22.75ms	4	-
Chrome 89.0	OS X 10.15.7 64-bit	262.19ms	0.76ms	12.80ms	4	-
Safari 14.1.1	OS X 10.15.6	293.67ms	1.33ms	7.33ms	3	-
Firefox 82.0	Windows 10 64-bit	177.33ms	2.67ms	31.33ms	3	-
Safari 14.0.2	OS X 10.15.6	204.00ms	0.33ms	10.33ms	3	-
Safari 14.0.3	OS X 10.15.6	331.67ms	0.67ms	10.67ms	3	-
Firefox 87.0	Windows 10 64-bit	486.67ms	2.33ms	30.67ms	3	-
Firefox 90.0	Windows 10 64-bit	246.00ms	2.00ms	8.50ms	2	-
Chrome 90.0	Windows Server 2008 R2 / 7	519.00ms	2.50ms	15.50ms	2	-
Chrome Mobile 91.0	Android 11	287.35ms	7.25ms	24.75ms	2	-
Chrome 91.0	Linux 64-bit	198.80ms	1.15ms	2.90ms	2	-
Safari 14.1.1	OS X 10.15.7	237.50ms	0.50ms	11.50ms	2	-
Safari 13.1	OS X 10.15.4	246.50ms	2.50ms	18.50ms	2	-
Firefox 81.0	OS X 10.14	110.00ms	3.50ms	67.50ms	2	-
Firefox 84.0	OS X 10.15	292.00ms	1.50ms	125.00ms	2	-
Safari 14.0.2	iOS 14.3	74.50ms	1.00ms	8.00ms	2	-
Safari 14.0.3	OS X 10.15.7	185.00ms	1.00ms	8.00ms	2	-
Firefox 87.0	Ubuntu 64-bit	339.00ms	4.50ms	12.00ms	2	-
Chrome 90.0	Linux 64-bit	253.45ms	1.42ms	25.15ms	2	-
Chrome Mobile 89.0	Android 10	322.25ms	3.65ms	10.75ms	2	-
Firefox 88.0	Windows 10 64-bit	332.50ms	1.00ms	12.50ms	2	-
Safari 14.0.3	iOS 14.4.2	243.00ms	1.00ms	8.00ms	1	-
Firefox 89.0	Linux 64-bit	401.00ms	3.00ms	21.00ms	1	-
Chrome 86.0	Windows 10 64-bit	241.65ms	0.69ms	3.76ms	1	-
Chrome 89.0	Windows Server 2008 R2 / 7	341.01ms	1.68ms	7.70ms	1	-
Chrome 89.0	null	20.00ms	0.00ms	280.00ms	1	-
Firefox 88.0	Windows Server 2008 R2 / 7 64-bit	2630.00ms	3.00ms	10.00ms	1	-
Chrome Mobile 90.0	Android 10	227.90ms	4.60ms	21.60ms	1	-
Chrome 90.0	OS X 10.14.6 64-bit	335.85ms	1.15ms	9.65ms	1	-
Chrome Mobile 90.0	Android 11	168.60ms	2.20ms	14.70ms	1	-
Chrome 90.0	Windows Server 2008 R2 / 7 64-bit	266.93ms	1.98ms	12.57ms	1	-
Opera 75.0	OS X 11.2.3	417.33ms	1.12ms	36.15ms	1	-
Firefox 88.0	Ubuntu 64-bit	594.00ms	2.00ms	20.00ms	1	-
Safari 12.1.2	iOS 12.5.2	800.00ms	2.00ms	34.00ms	1	-
Chrome Mobile 70.0	Android 4.3	935.90ms	12.70ms	49.40ms	1	-
Chrome 88.0	Chrome OS armv7l	788.36ms	6.47ms	28.16ms	1	-
Chrome 90.0	OS X 10.15.4 64-bit	268.27ms	0.87ms	4.02ms	1	-
Safari 13.1	iOS 14.4.2	338.00ms	1.00ms	10.00ms	1	-
Chrome Mobile 91.0	Android 9	1449.00ms	7.20ms	38.70ms	1	-
Firefox 89.0	Ubuntu 64-bit	213.00ms	2.00ms	9.00ms	1	-