MS Edge 和 IE 中的 CSS 动画方向错误

Question

我创建了一个简单的 CSS 动画，它可以垂直转换一个伪元素。此动画在 Chrome、FireFox 和 Safari 中效果很好，但在 Microsoft Edge 或 Internet Explorer 中效果不佳。

我正在努力找出这个错误的原因。任何帮助都会很棒！

动画的外观：

它在 Edge 和 IE 中的外观：

动画示例： https://jsfiddle.net/9x5vckhb/

@keyframes scroll {
    0% {
        transform: translate(-50%, 20%);
        opacity: 0;
    },
    30% {
        opacity: 1;
    },
    40% {
        opacity: 1;
    },
    70% {
        transform: translate(-50%, 120%);
        opacity: 0;
    },
    100% {
        transform: translate(-50%, 120%);
        opacity: 0;
    }
}

Answer 1

我想知道这是否是一个错误。我一生都无法解决这个问题。在第一个动画循环之后，似乎 x & y 被交换了。切换到transform3d()，效果很好。

Fiddle

&:before {
    content: '•';
    font-size: round($width/100*63.3);
    top: 0;
    transform: translate3d(-50%, 30%, 0);
    animation: scroll ease 3s;
    animation-iteration-count: infinite;
  }

和

@keyframes scroll {
  0% {
    transform: translate3d(-50%, 20%, 0);
    opacity: 0;
  },
  30% {
    opacity: 1;
  },
  40% {
    opacity: 1;
  },
  70% {
    transform: translate3d(-50%, 120%, 0);
    opacity: 0;
  },
  100% {
    transform: translate3d(-50%, 120%, 0);
    opacity: 0;
  }
}