Add random 0 to 5s animation delay

It is better aesthetically if each effect flickers out of sync, to show their independence.

diff --git a/index.html b/index.html
index d59fad966a401a819284ea0292457d0624919931..afee7de5f7acf07212e212525d91e7648086f75c 100644 (file)
--- a/index.html
+++ b/index.html
@@ -82,7 +82,7 @@
         inline-size: 100%;
         block-size: 100%;
         border-radius: 2ch;
-        animation: flicker 1s linear infinite alternate;
+        animation: flicker 1s linear var(--delay) infinite alternate;
       }
 
       &.color {
@@ -186,6 +186,7 @@
     // Add hidden effect
     const colorEffect = document.createElement('button');
     colorEffect.classList.add('effect', 'color');
+    colorEffect.style.setProperty('--delay', `${Math.floor(Math.random() * 5000)}ms`);
     const highlightStyle = document.createElement('style');
     document.head.appendChild(highlightStyle);
     colorEffect.addEventListener('click', e => {
@@ -211,6 +212,7 @@
     // Add hidden effect 2
     const translateEffect = document.createElement('button');
     translateEffect.classList.add('effect', 'translate');
+    translateEffect.style.setProperty('--delay', `${Math.floor(Math.random() * 5000)}ms`);
     translateEffect.addEventListener('click', e => {
       e.target.textContent = '!';