css - 不透明度的CSS转换scaleX在Safari中不起作用

Question

这是代码。

当在背景图像中使用具有不透明度的 scaleX 时，它在 mac 或 iphone 上的 safari 中不起作用，所以我们使用 scale 或 scale3d(sx,sy,sz) 来解决这个问题，但这是怎么发生的呢？这是野生动物园的错误吗？

        @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);
    }
}

标签： csssafari

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);
    }
}