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

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