Question

在运行下面的CSS时，我们遇到了一个奇怪的iOS故障，以动画一些在页面上飞过的形状。形状从全尺寸开始，然后慢慢缩小并逐渐消失，尽管在Safari或iOS上的Chrome动画结束时，它们会以完整图像大小闪回完全不透明度。这只是一秒钟，但是这些物体中有15个飞过页面，就像爆米花一样。您可以在此处预览问题：http://visier.rps.is/。知道这是怎么回事吗？

 #logo-one {
  opacity: 0;
  background: url("../img/animation-sprites.png") no-repeat;
  width: 52px;
  height: 58px;
  background-position: 0 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: changeSize-one 3s 5s infinite linear both;
  -moz-animation: changeSize-one 3s 5s infinite linear both;
  -o-animation: changeSize-one 3s 5s infinite linear both;
  animation: changeSize-one 3s 5s infinite linear both;
  right: -52px;
  position: absolute;
}
@-webkit-keyframes changeSize-one {
  0% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    -ms-transform: rotate(0deg) scale(1);
    -webkit-transform: rotate(0deg) scale(1);
    top: 120px;
    right: -52px;
  }
  50% {
    opacity: .5;
    transform: rotate(15deg) scale(0.77);
    -ms-transform: rotate(15deg) scale(0.77);
    -webkit-transform: rotate(15deg) scale(0.77);
    right: 200px;
    top: 60px;
  }
  100% {
    opacity: 0;
    transform: rotate(30deg) scale(0.29);
    -ms-transform: rotate(30deg) scale(0.29);
    -webkit-transform: rotate(30deg) scale(0.29);
    right: 430px;
    top: 0;
  }
}
}

Answer 1

您可以尝试使用transform：translate CSS属性而不是top和right？

transform: rotate(*) scale(*) translate(50px,100px);

在关键帧缩放变换后，iOS上的图像闪烁为全尺寸

1 个答案: