How do I specifically check for compatibility of @keyframes translate3d animations with the browser ?

Please Don't close this question since I've tried many stackoverflow solutions before asking this question.

I want to check whether the browser my webpage runs is compatible for running animations, since many android browsers(Old Ones) are not capable of running them, they just stop displaying output text when animation fails (In MY Case). So, I would like to either stop animations or redirect them to another copy of my same website without any animations :)

P.S I've also tried using @supports, but of no use :(

h1,h2{
            height: 40px;
            animation: an 1s ease-out 1 both;
        }
    @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">Test Texts</h1>
<h2 id="h2" class="th">Also Test Texts..</div>

CodePudding user response：

Check with media query:

@media all and (-webkit-transform-3d) {
   css animation when supported
};

Check with @supports:

@supports (transform: translate3d) {

}

or

@supports not (transform: translate3d) {

}

or you can check out this javascript solution https://gist.github.com/lorenzopolidori/3794226

CodePudding user response：

@supports query works just fine. It has to be at top level of the code. You also need to provide some dummy values for the translate3d.

@supports(transform: translate3d(100px,100px,10px)){   
  div{
    background: blue;
  }
}

@supports not (transform: translate3d(100px,100px,10px)){   
  div{
    background: red;
  }
}

div{
  width: 250px;
  height: 250px;
)

<div></div>

For browsers with no support for @supports query, you can add default value/property to the element. You also need to add !important to values of properties inside of @supports to override the default value.
This should work on all browsers.

@supports(transform: translate3d(100px,100px,10px)){   
  div{
    background: blue !important;
  }
}

@supports not (transform: translate3d(100px,100px,10px)){   
  div{
    background: red !important;
  }
}

div{
  width: 250px;
  height: 250px;
  background: red;  /* default value */
)

<div></div>