CSS @keyframes translate3d 兼容性

Question

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

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

我想检查我的网页运行的浏览器是否兼容运行动画，因为许多 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

检查媒体查询：

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

与@supports 联系：

@supports (transform: translate3d) {

}

或

@supports not (transform: translate3d) {

}

或者您可以查看此 javascript 解决方案 https://gist.github.com/lorenzopolidori/3794226

Answer 2

@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 查询的浏览器，您可以将默认的 value/property 添加到元素中。您还需要将 !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>

CSS @keyframes translate3d 兼容性

CSS @keyframes translate3d Compatibility

css

compatibility