检查移动浏览器中的 CSS 动画 (@keyframes) 支持

Question

看起来有些旧的移动浏览器不支持 CSS 动画，我在我的网站上使用它导致我网站上的文本无法加载。

动画中的初始设置是 opacity:0 ，但是显示文本的 space 甚至没有显示，所以我认为可能是由于不兼容 issue.I would to将此类用户重定向到我创建的另一个没有动画的网站。

我的动画代码是

 .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);
            }

这是文字谎言

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

这是我用于动画的Javascript

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]);
}

我也尝试过mozilla的一些解决方案，但没有用。

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

P.S 对于认为这有解决方案的人@ CSS 动画支持

那里没有什么真正有用的东西

Answer 1

使用@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>

检查移动浏览器中的 CSS 动画 (@keyframes) 支持

Check CSS Animation (@keyframes) Support in Mobile Browser

css

css-animations