CSS @keyframes translate3d Compatibility

user_16815768 0
Viewed 86

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>

compatibility css
2 Answers

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

Applying this to your snippet, you get this:

@supports(transform: translate3d(100px, 100px, 10px)) {
  h1,
  h2 {
    animation: an 1s ease-out 1 both !important;
  }
  @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);
    }
  }
}

@supports not (transform: translate3d(100px, 100px, 10px)) {
  h1,
  h2 {
    animation: an 1s ease-out 1 both !important;
    /*you can also set it to efault animation  */
  }
  @keyframes an {
    /* some different animation */
  }
}

h1,
h2 {
  height: 40px;
  animation: defaultA 1s ease-out 1 both;
}

@keyframes defaultA {
  /* some default animation */
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
<h1 id="h1" class="th">Test Texts</h1>
<h2 id="h2" class="th">Also Test Texts..</h2>

user_92561890

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

user_143351530
Related