Question

我创建的动画在Chrome和Firefox上运行良好，但在Safari（版本10.1.1）和IE11上都是像素化的。

尝试使用translateZ（）/ translate3d（），这样gpu可以渲染动画，但什么也没发生。

我避免使用顶部左侧道具。有想法使用意志改变道具，但它不会将动画视为一种价值。

删除边框半径将解决渲染问题。

有人可以解释原因并且有解决方案来解决这个问题吗？

html - ＆gt;

<div class="dot"></div>

css - ＆gt;

  /* KEYFRAME ANIMATION */
  @keyframes ease {
    0% {
      transform: scale(0) rotate(0);
    }
    50% {
      transform: scale(4)
    rotate(.01deg);
    }
    100% {
      transform: scale(0) rotate(0);
    }
  }

  @keyframes ease2 {
    0% {
      transform: scale(0) rotate(0);
    }
    50% {
      transform: scale(6)
    rotate(.01deg);
    }
    100% {
      transform: scale(0) rotate(0);
    }
  }

.dot {
  $scale-duration: 15s;

  background-color: black;
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;

  &::before,
  &::after {
    content: "";
    background: red;
    width: 7px;
    height: 7px;
    border-radius: inherit;
    opacity:.3;
    position: absolute;
    transform: translate(0px, 0px);
  }

  &::before {
    animation: ease 5s ease-in-out infinite;
  }
  &::after {
    animation: ease2 5s ease-in-out infinite both $scale-duration/15;
  }
}

谢谢： - ）

Answer 1

我没有足够的声誉，所以我还没有发表评论，很抱歉，如果这不符合正确的答案，但您尝试将大小更改为大于7px的内容并使用例如scale(1)代替是scale(4)？

如果您需要将宽度和高度缩放4或6，为什么不将原始尺寸加倍并按比例放大2？

如果safari没有真正缩小尺寸，我不会感到惊讶，但有点像“放大”，因为原始尺寸只有7 x 7像素，所以当“放大”时它会变得像素化

关于意志改变：你不会使用“动画”而是“转换”

动画在safari浏览器和IE11上看起来像素化

1 个答案: