具有不透明度的 Css 转换 scaleX 在 Safari 中不起作用

Question

这是 code .

当在背景图像中使用不透明度的 scaleX 时，它在 mac 或 iphone 上的 safari 中不起作用，因此我们使用 scale 或 scale3d(sx,sy,sz) 来解决这个问题， 但这是怎么发生的呢？这是 Safari 浏览器错误吗？

        @keyframes scale-not-work-in-iphone {
    0% {
        transform: scaleX(1);
    }
    99% {
        opacity: 0;
        transform: scale3d(2, 2, 2);
    }

    100% {
        opacity: 0;
        transform: scale3d(0, 0, 0);
    }
}

Answer 1

我认为这是因为您没有为 webkit 使用前缀。您也可以将不透明度设置为 0% 以确保它通过。希望这对您有所帮助。

@keyframes scale-should-work-in-iphone {
    0% {
      opacity: 1;
      -webkit-transform:scaleX(1) scale3d(2, 2, 2);
      -moz-transform:scaleX(1) scale3d(2, 2, 2);
      -ms-transform:scaleX(1) scale3d(2, 2, 2);
      -o-transform:scaleX(1) scale3d(2, 2, 2);
      transform: scaleX(1) scale3d(2, 2, 2);
    }
    99% {
      opacity: 0;
      -webkit-transform:scaleX(1) scale3d(2, 2, 2);
      -moz-transform:scaleX(1) scale3d(2, 2, 2);
      -ms-transform:scaleX(1) scale3d(2, 2, 2);
      -o-transform:scaleX(1) scale3d(2, 2, 2);
      transform: scaleX(1) scale3d(2, 2, 2);
    }

    100% {
      opacity: 0;
      -webkit-transform:scaleX(1) scale3d(0, 0, 0);
      -moz-transform:scaleX(1) scale3d(0, 0, 0);
      -ms-transform:scaleX(1) scale3d(0, 0, 0);
      -o-transform:scaleX(1) scale3d(0, 0, 0);
      transform:scaleX(1) scale3d(0, 0, 0);
    }
}