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

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

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

CSS animation in MS Edge and IE animates in wrong direction

css

animation

internet-explorer

css-animations

microsoft-edge