Question

我有连续运行的动画，它将元素（箭头）从向右移动然后旋转 180deg 并从向左移动正确。由于某些原因，动画在 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;

以及其他动画属性。根据经验，所有浏览器通常只使用plain和-webkit-前缀，但抛出其他前缀应该保证它。您可能还需要考虑在将来使用IDE中的自动前缀来自行保存复制粘贴。

我希望这能解决它。

Answer 2

我在Internet Explorer 10和11中使用CSS动画的问题是使用一个轴的百分比（％）值和 translate3d 中其他轴的像素（px）值。我能够修复错误移动到 translate3d

中所有轴的基于像素的值

＆＃13;

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

＆＃13;

有趣的是，为什么IE无法使用一个轴的像素和其他轴的百分比值？为了将来的使用，请记住的事情。

CSS关键帧动画：在IE10和IE11中看不到translate3d

2 个答案: