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 89.0	Windows 10 64-bit	274.96ms	1.27ms	7.93ms	22	-
Firefox 84.0	Windows 10 64-bit	241.00ms	1.60ms	10.80ms	5	-
Firefox 85.0	Windows 10 64-bit	534.50ms	3.00ms	24.50ms	4	-
Chrome Mobile 87.0	iOS 14.4	307.25ms	1.25ms	9.00ms	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	-
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	-
Safari 14.0.2	OS X 10.15.6	204.00ms	0.33ms	10.33ms	3	-
Firefox 87.0	Windows 10 64-bit	486.67ms	2.33ms	30.67ms	3	-
Chrome 90.0	OS X 10.15.7 64-bit	352.71ms	1.17ms	8.00ms	3	-
Firefox 82.0	Windows 10 64-bit	177.33ms	2.67ms	31.33ms	3	-
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.6	358.50ms	0.50ms	11.50ms	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 Mobile 89.0	Android 10	322.25ms	3.65ms	10.75ms	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	-
Safari 14.0.1	iOS 14.2	144.00ms	1.00ms	15.00ms	1	-
Safari 14.0	iOS 14.1	213.00ms	2.00ms	28.00ms	1	-
Safari 14.0	OS X 10.14.6	636.00ms	1.00ms	10.00ms	1	-
Safari 12.1.2	iOS 12.4.9	901.00ms	3.00ms	260.00ms	1	-
Chrome 83.0	OS X 10.15.7 64-bit	162.42ms	0.83ms	4.21ms	1	-
Firefox 84.0	OS X 10.16	156.00ms	3.00ms	49.00ms	1	-
Firefox 84.0	OS X 10.14	89.00ms	2.00ms	9.00ms	1	-
Firefox 85.0	OS X 10.16	185.00ms	1.00ms	10.00ms	1	-
Chrome Mobile 87.0	iOS 14.3	84.00ms	1.00ms	2.00ms	1	-
Firefox 85.0	OS X 10.13	257.00ms	2.00ms	28.00ms	1	-
Safari 14.0.2	OS X 10.14.6	593.00ms	1.00ms	6.00ms	1	-
Firefox 86.0	OS X 10.16	216.00ms	2.00ms	5.00ms	1	-
Firefox 86.0	Windows 10 64-bit	197.00ms	1.00ms	5.00ms	1	-
Samsung Internet 13.2	Android 10	289.90ms	2.30ms	15.20ms	1	-
Firefox 87.0	OS X 10.15	478.00ms	2.00ms	10.00ms	1	-
Chrome 89.0	Linux 64-bit	661.51ms	4.09ms	30.97ms	1	-
Chrome 89.0	OS X 10.14.6 64-bit	112.35ms	2.05ms	3.60ms	1	-
Chrome 89.0	Windows Server 2008 R2 / 7 64-bit	163.88ms	0.88ms	9.73ms	1	-
Chrome 89.0	Windows 8.1 64-bit	379.00ms	3.00ms	11.00ms	1	-
Chrome 89.0	OS X 11.1.0 64-bit	187.21ms	0.75ms	6.68ms	1	-
Chrome 89.0	OS X 11.2.0 64-bit	235.13ms	0.75ms	4.21ms	1	-
Chrome 89.0	OS X 10.15.6 64-bit	380.96ms	5.47ms	15.13ms	1	-
Chrome 90.0	Linux 64-bit	242.40ms	0.96ms	4.42ms	1	-
Chrome Mobile 89.0	Android 8.0.0	462.10ms	3.60ms	27.90ms	1	-
Chrome 87.0	Chrome OS 64-bit	2369.27ms	16.33ms	101.23ms	1	-
Firefox 88.0	Windows 10 64-bit	328.00ms	1.00ms	6.00ms	1	-
Safari 14.0.3	iOS 14.4.2	243.00ms	1.00ms	8.00ms	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	-