Fit/fix flash duration animation to length

public/css/animations.css

@@ -55,16 +55,11 @@
 
 /* Flashing for highlighting animation */
 @keyframes flash {
-
-    20%,
-    60%,
-    100% {
+    0%, 50%, 100% {
         opacity: 1;
     }
 
-    0%,
-    40%,
-    80% {
+    25%, 75% {
         opacity: 0.2;
     }
 }

public/scripts/utils.js

@@ -1571,13 +1571,29 @@ export function setValueByPath(obj, path, value) {
 /**
  * Flashes the given HTML element via CSS flash animation for a defined period
  * @param {JQuery<HTMLElement>} element - The element to flash
- * @param {number} timespan - A numer in milliseconds how the flash should last
+ * @param {number} timespan - A number in milliseconds how the flash should last (default is 2000ms.  Multiples of 1000ms work best, as they end with the flash animation being at 100% opacity)
  */
 export function flashHighlight(element, timespan = 2000) {
+    const flashDuration = 2000; // Duration of a single flash cycle in milliseconds
+
     element.addClass('flash animated');
-    setTimeout(() => element.removeClass('flash animated'), timespan);
+    element.css('--animation-duration', `${flashDuration}ms`);
+
+    // Repeat the flash animation
+    const intervalId = setInterval(() => {
+        element.removeClass('flash animated');
+        void element[0].offsetWidth; // Trigger reflow to restart animation
+        element.addClass('flash animated');
+    }, flashDuration);
+
+    setTimeout(() => {
+        clearInterval(intervalId);
+        element.removeClass('flash animated');
+        element.css('--animation-duration', '');
+    }, timespan);
 }
 
+
 /**
  * Checks if the given control has an animation applied to it
  *

public/style.css

@@ -208,8 +208,8 @@ table.responsiveTable {
 }
 
 .animated {
-    -webkit-animation-duration: 3s !important;
-    animation-duration: 3s !important;
+    -webkit-animation-duration: var(--animation-duration, 3s) !important;
+    animation-duration: var(--animation-duration, 3s) !important;
     -webkit-animation-fill-mode: both !important;
     animation-fill-mode: both !important;
     box-shadow: inset 0 0 5px var(--SmartThemeQuoteColor);