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

【问题标题】：Animation looks pixelated on safari browser and IE11动画在 safari 浏览器和 IE11 上看起来像素化
【发布时间】：2023-03-05 13:29:01
【问题描述】：

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

尝试使用 translateZ() / translate3d() 以便 gpu 可以渲染动画，但没有任何反应。

我避免使用左上角道具。有使用 will-change 道具的想法，但它不将动画作为值。

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

有人能解释一下这个问题的原因吗？有解决这个问题的方法吗？

https://codepen.io/imrdev/pen/awBZOW

html->

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

css->

  /* 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;
  }
}

谢谢:-)

【问题讨论】：

我删除了一些属性，这在 Chrome 和 IE 上看起来是一样的：codepen.io/anon/pen/YQpGoW

标签： css css-animations

【解决方案1】：

我没有足够的声誉，所以我还不能发表评论，如果这不能作为正确的答案，很抱歉，但是您是否尝试过将大小更改为大于 7px 的大小并使用例如 scale(1) 而不是 @ 987654322@?

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

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

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

【讨论】：