CSS animation not working in LWC in Safari

Question

The bottom right spinner here:

CSS animation in LWC not working

animates in Chrome and Safari as static HTML. But when added into an LWC - meaning the content is dynamically added to the DOM - it animates in Chrome but does not animate in Safari.

I presume the problem is unrelated to this fixed problem CSS animation in LWC not working, and has more to do with Safari. Things I found Googling such as adding a start delay didn't help:

animation: cssload-dots 3.25s infinite 0.01s ease-in-out;

I think this is worth flagging that here for anyone thinking of adding animations to their LWC. And if there is a reliable answer to how to fix this, that would be great too...

Don't see any mention of Safari in the change history of the SLDS spinner.

Answer 1

Seems like Safari (webkit) behaves a bit unexpectedly when the animation is dynamically added. After many, many, many tries, the smallest change I could get to work was from this:

    animation: cssload-dots 3.25s infinite ease-in-out;
        -o-animation: cssload-dots 3.25s infinite ease-in-out;
        -ms-animation: cssload-dots 3.25s infinite ease-in-out;
        -webkit-animation: cssload-dots 3.25s infinite ease-in-out;
        -moz-animation: cssload-dots 3.25s infinite ease-in-out;
    transform-origin: 50% 50%;
        -o-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        -moz-transform-origin: 50% 50%;
}

@keyframes cssload-dots {

to this:

    animation: cssload-dots-x 3.25s infinite ease-in-out;
        -o-animation: cssload-dots 3.25s infinite ease-in-out;
        -ms-animation: cssload-dots 3.25s infinite ease-in-out;
        /* -webkit-animation: cssload-dots 3.25s infinite ease-in-out; */
        -moz-animation: cssload-dots 3.25s infinite ease-in-out;
    transform-origin: 50% 50%;
        -o-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        -moz-transform-origin: 50% 50%;
}

@keyframes cssload-dots-x {

meaning both a unique keyframes name was needed and the webkit style needed to be removed.

If you are including animation CSS in your LWC, be sure to test with Safari.