Update templates/index.html

templates/index.html

@@ -44,10 +44,24 @@
 
         function navigate(url) {
             const flashcard = document.getElementById('flashcard');
-            flashcard.classList.add('fade-out');
-            setTimeout(function() {
+            animateFadeOut(flashcard, function() {
                 window.location.href = url;
-            }, 500); // Match this duration with the CSS animation duration
+            });
+        }
+
+        function animateFadeOut(element, callback) {
+            let opacity = 1;
+            function fade() {
+                opacity -= 0.1;
+                if (opacity <= 0) {
+                    element.style.opacity = 0;
+                    callback();
+                } else {
+                    element.style.opacity = opacity;
+                    requestAnimationFrame(fade);
+                }
+            }
+            fade();
         }
     </script>
 </body>