CSS 关键帧动画：translate3d 在 IE10 和 IE11 中不可见

Question

我有动画运行连续移动一个元素（箭头）从右到左然后旋转180 度 并从左移到右。由于某些原因，动画在 IE10 中不可见，但箭头出现在左右位置。

总的来说，动画发生了，但是 translate3d 动画（从左到右和从右到左移动）不可见。

@keyframes moveRightToLeft {
    0% {
        -moz-transform: rotateZ(0deg) translate3d(0%, 0, 0);
        -webkit-transform: rotateZ(0deg) translate3d(0%, 0, 0);
        -o-transform: rotateZ(0deg) translate3d(0%, 0, 0);
        -ms-transform: rotateZ(0deg) translate3d(0%, 0, 0);
        transform: rotateZ(0deg) translate3d(0%, 0, 0);
        opacity: 1;
    }
    50% {
        -moz-transform: rotateZ(0deg) translate3d(-80%, 0, 0);
        -webkit-transform: rotateZ(0deg) translate3d(-80%, 0, 0);
        -o-transform: rotateZ(0deg) translate3d(-80%, 0, 0);
        -ms-transform: rotateZ(0deg) translate3d(-80%, 0, 0);
        transform: rotateZ(0deg) translate3d(-80%, 0, 0);
        opacity: 0;
    }
    51% {
        -moz-transform: rotateZ(180deg) translate3d(0%, 13px, 0);
        -webkit-transform: rotateZ(180deg) translate3d(0%, 13px, 0);
        -o-transform: rotateZ(180deg) translate3d(0%, 13px, 0);
        -ms-transform: rotateZ(180deg) translate3d(0%, 13px, 0);
        transform: rotateZ(180deg) translate3d(0%, 13px, 0);
        opacity: 0;
    }
    75% {
        -moz-transform: rotateZ(180deg) translate3d(-40%, 13px, 0);
        -webkit-transform: rotateZ(180deg) translate3d(-40%, 13px, 0);
        -o-transform: rotateZ(180deg) translate3d(-40%, 13px, 0);
        -ms-transform: rotateZ(180deg) translate3d(-40%, 13px, 0);
        transform: rotateZ(180deg) translate3d(-40%, 13px, 0);
        opacity: 1;
    }
    100% {
        -moz-transform: rotateZ(180deg) translate3d(-80%, 13px, 0);
        -webkit-transform: rotateZ(180deg) translate3d(-80%, 13px, 0);
        -o-transform: rotateZ(180deg) translate3d(-80%, 13px, 0);
        -ms-transform: rotateZ(180deg) translate3d(-80%, 13px, 0);
        transform: rotate(180deg) translate3d(-80%, 13px, 0);
        opacity: 0;
    }
}

Answer 1

您似乎已经进行了特定于浏览器的转换（这很好），但是您还没有进行特定于浏览器的关键帧。我相信这就是你的问题所在。为了方便起见，我稍微缩短了您的动画，但请尝试这样的操作：

@keyframes moveRightToLeft {
    0% {
        transform: rotateZ(0deg) translate3d(0%, 0, 0);
        opacity: 1;
    }
    100% {
        transform: rotate(180deg) translate3d(-80%, 13px, 0);
        opacity: 0;
    }
}

@-webkit-keyframes moveRightToLeft {
    0% {
        -webkit-transform: rotateZ(0deg) translate3d(0%, 0, 0);
        opacity: 1;
    }
    100% {
        -webkit-transform: rotate(180deg) translate3d(-80%, 13px, 0);
        opacity: 0;
    }
}

@-moz-keyframes moveRightToLeft {
    0% {
        -moz-transform: rotateZ(0deg) translate3d(0%, 0, 0);
        opacity: 1;
    }
    100% {
        -moz-transform: rotate(180deg) translate3d(-80%, 13px, 0);
        opacity: 0;
    }
}

@-o-keyframes moveRightToLeft {
    0% {
        -o-transform: rotateZ(0deg) translate3d(0%, 0, 0);
        opacity: 1;
    }
    100% {
        -o-transform: rotate(180deg) translate3d(-80%, 13px, 0);
        opacity: 0;
    }
}

@-ms-keyframes moveRightToLeft {
    0% {
        -ms-transform: rotateZ(0deg) translate3d(0%, 0, 0);
        opacity: 1;
    }
    100% {
        -ms-transform: rotate(180deg) translate3d(-80%, 13px, 0);
        opacity: 0;
    }
}

还记得用这样的前缀声明你的动画：

animation-name: moveRightToLeft;
-webkit-animation-name: moveRightToLeft;
-moz-animation-name: moveRightToLeft;
-o-animation-name: moveRightToLeft;
-ms-animation-name: moveRightToLeft;

以及您的其他动画属性。根据经验，所有浏览器通常只使用普通前缀和 -webkit- 前缀，但加入其他前缀应该可以保证。您可能还想考虑在您的 IDE 中使用 auto-prefixer 以节省您自己的复制粘贴。

我希望这能解决问题。

Answer 2

我的 CSS 动画在 Internet Explorer 10 和 11 中的问题是在 translate3d[=23] 中一个轴使用百分比 (%) 值而另一个轴使用像素 (px) 值=].我能够修复 translate3d

中所有轴移动到基于像素的值的错误

@keyframes moveRightToLeft { 0% { -webkit-transform: rotateZ(0deg) translate3d(0, 0, 0); -ms-transform: rotateZ(0deg) translate3d(0, 0, 0); transform: rotateZ(0deg) translate3d(0, 0, 0); } 50% { -webkit-transform: rotateZ(0deg) translate3d(-70px, 0, 0); -ms-transform: rotateZ(0deg) translate3d(-70px, 0, 0); transform: rotateZ(0deg) translate3d(-70px, 0, 0); opacity: 1; } 51% { opacity: 0; -webkit-transform: rotateZ(0deg) translate3d(-75px, 0px, 0); -ms-transform: rotateZ(0deg) translate3d(-75px, 0px, 0); transform: rotateZ(0deg) translate3d(-75px, 0px, 0); } 52% { opacity: 0; -webkit-transform: rotateZ(180deg) translate3d(75px, 0px, 0); -ms-transform: rotateZ(180deg) translate3d(75px, 0px, 0); transform: rotateZ(180deg) translate3d(75px, 0px, 0); } 55% { opacity: 1; } 75% { -webkit-transform: rotateZ(180deg) translate3d(40px, 0px, 0); -ms-transform: rotateZ(180deg) translate3d(40px, 0px, 0); transform: rotateZ(180deg) translate3d(40px, 0px, 0); opacity: 1; } 100% { -webkit-transform: rotateZ(180deg) translate3d(0px, 0px, 0); -ms-transform: rotateZ(180deg) translate3d(0px, 0px, 0); transform: rotate(180deg) translate3d(0px, 0px, 0); opacity: 1; } }

有趣的是，为什么 IE 不能在一个轴上使用像素而在另一个轴上使用百分比值？为了将来使用，请记住这一点。

CSS 关键帧动画：translate3d 在 IE10 和 IE11 中不可见

CSS keyframe animation: translate3d is not visible in IE10 and IE11

css

css-animations

internet-explorer-10