CSS Animation Delay optimization guide as Expected in Chrome - Need Guidance
Quick question that's been bugging me - I'm working on a personal project and I'm working with an scenario where my CSS animations are not respecting the specified delay in Chrome..... I'm using `@keyframes` for a fade-in effect on my elements, but despite setting a 2-second delay, the animation starts immediately. Here's a simplified version of my CSS code: ```css .fade-in { animation: fadeIn 1s ease forwards; animation-delay: 2s; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } ``` I've verified that the class is correctly applied to the element in the DOM. When I inspect it in Chrome's developer tools, I can see the animation properties being applied, but the delay doesn't seem to take effect. I also tried using `animation: fadeIn 1s ease 2s forwards;` as well, but that didn't resolve the scenario either. This works perfectly in Firefox and Edge, so it seems specific to Chrome. I've also cleared the cache and checked for any CSS overrides that might be causing the question, but nothing seems to be interfering. Is there something unique about how Chrome handles animation delays that I might be missing? Any help would be greatly appreciated! For context: I'm using Css on macOS. For context: I'm using Css on Ubuntu. Any help would be greatly appreciated! How would you solve this?