jQuery .animate() optimization guide on CSS custom properties in Edge browser
I'm a bit lost with I’m trying to animate a CSS custom property (CSS variable), specifically `--my-opacity`, using jQuery's `.animate()` method, but it seems to not work as expected in Edge... Here's the code I'm using: ```javascript $(':root').css('--my-opacity', 1); $('#myElement').click(function() { $(this).animate({ '--my-opacity': 0 }, { duration: 1000 }); }); ``` In Chrome and Firefox, this smoothly animates the opacity of the element as intended, but in Edge, the animation doesn’t trigger at all, and I see no changes in the computed styles. I’ve checked for any console errors, and nothing stands out, but I do notice that Edge behaves differently with CSS variables. I've also tried using jQuery's `.css()` method to manually set the property after the animation, but that doesn’t give a smooth transition either. My HTML is straightforward: ```html <div id="myElement" style="--my-opacity: 1; opacity: var(--my-opacity); background: red; width: 100px; height: 100px;"></div> ``` I’ve confirmed that the CSS variable is correctly defined in the `:root`, and I made sure that the jQuery version is up to date (3.6.0). Is there a workaround or best practice for animating CSS variables in Edge? Any insights would be greatly appreciated! I'm using Javascript 3.11 in this project. Cheers for any assistance! Any help would be greatly appreciated!