Fade Animation on Page Load

Configuration Frontend
1

Hi,

I am attempting to add a fade animation to ha-card elements on page load, so that the cards gradually appear with a fade effect.

However, when the page loads, I notice that the Lovelace cards momentarily flash before the fade animation takes effect. This flash occurs prior to the intended fade transition.

Is it possible to make cards appear without any visible flashing?

Steps to Reproduce:

  1. Implement fade animation on ha-card elements.
  2. Reload the page.

Thank you!

Here is an example yaml :

card_mod:
    style: |
        ha-card {
          opacity: 0;
          animation: fadeIn 2s ease-in-out forwards;
        }

        @keyframes fadeIn {
          from {
            opacity: 0;
          }
          to {
            opacity: 1;
          }
        }