Check CSS Animation (@keyframes) Support in Mobile Browser-CodePudding

Looks like some old Mobile browsers won't support CSS animations and I'm using it in my website which is causing the texts on my site not to load.

The initial setting in animation is opacity:0 , But the space for text to appear is not even displayed,so I think maybe that's due to an incompatibility issue.I would like to redirect such users to another website I've created with no animations.

The code of my animations is

 .char{
            font-size: 40px;
            height: 40px;
            animation: an 1s ease-out 1 both;
            display: inline-block;
        }
@keyframes an{
            from{
                opacity: 0;
                transform: perspective(500px) translate3d(-35px, -40px, -150px) rotate3d(1, -1, 0, 35deg);
            }
            to{
                opacity: 1;
                transform: perspective(500px) translate3d(0, 0, 0);
            }

Here's text Lies

<h1 id="h1" class="th">Here's some text</h1>
<h2 id="h2" class="th">These are some texts too...</div>

Here's the Javascript I'm using for animation

function myFunc(text) {
  var newDom = '';
        var animationDelay = 6;

        for(let i = 0; i < text.innerText.length; i  )
        {
            newDom  = '<span class="char">'   (text.innerText[i] == ' ' ? ' ' : text.innerText[i])  '</span>';
        }

        text.innerHTML = newDom;
        var length = text.children.length;

        for(let i = 0; i < length; i  )
        {
            text.children[i].style['animation-delay'] = animationDelay * i   'ms';
        }
}

myFunc(text[0]); // call functions with your items.
myFunc(text[1]);
}

I've also tried some solutions by mozilla, but of no use.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support

P.S For people who think this has solution @ CSS Animation Support

There's nothing really Helpful there

CodePudding user response：

Use @supprots @supports

h1,h2 {
  
  animation: an 5s infinite;
}

@supports (display: grid) {
    @keyframes an {
        from {
            opacity: 0;
            transform: perspective(500px) translate3d(-35px, -40px, -150px) rotate3d(1, -1, 0, 35deg);
        }
        to {
            opacity: 1;
            transform: perspective(500px) translate3d(0, 0, 0);
        }
}

<h1 id="h1" class="th">Here's some text</h1>
<h2 id="h2" class="th">These are some texts too...</div>