Question

这里是code。

在背景图片中使用带有不透明性的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);
    }
}

CSS转换带有不透明度的scaleX在Safari中不起作用

1 个答案: