CSS @keyframes translate3d 兼容性

Question

我如何专门检查 @keyframes translate3d 动画 与浏览器的兼容性？

请不要关闭这个问题，因为在问这个问题之前我已经尝试了很多 stackoverflow 解决方案。

我想检查我的网页运行的浏览器是否兼容运行动画，因为许多 android 浏览器(旧版)无法运行它们，它们只是在动画失败时停止显示输出文本(在我的案例中).所以，我想要么停止动画，要么将它们重定向到我的同一网站的另一个没有任何动画的副本:)

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>

Answer 1

@supports 查询工作得很好。它必须位于代码的顶层。您还需要为 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>

---

对于不支持@supports 查询的浏览器，您可以向元素添加默认值/属性。您还需要将 !important 添加到 @supports 内的属性值以覆盖默认值。
这应该适用于所有浏览器。

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

将此应用于您的代码段，您会得到:

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