Question

我在IE中遇到关键帧背景动画的一些问题。我试图让一些图像在页面加载时从屏幕上滑动到位。此代码在Chrome中运行良好，但在IE中不显示动画。

这是我的动画代码：

@keyframes slideUp {
    from { background-position: left 50em, right 50em, left 50em, right 50em; }
    to { background-position: left bottom, right bottom, left bottom, right bottom; }
}

.content00001.page_container{
    background-image: url('../images/content00001/Asset9.png'), url('../images/content00001/Asset10.png'), url('../images/content00001/Asset11.png'), url('../images/content00001/Asset12.png');
    background-repeat: no-repeat;
    background-position: left bottom, right bottom, left bottom, right bottom;
    background-size: 22% 100%, 22% 100%, 22% 70%, 22% 70%;
    -webkit-animation: 1.2s ease 0s slideUp;
       -moz-animation: 1.2s ease 0s slideUp;
        -o--animation: 1.2s ease 0s slideUp;
            animation: 1.2s ease 0s slideUp;
}

对于我在这里失踪的任何帮助都会很棒！

Answer 1

您可能需要复制关键帧并为其添加-webkit-前缀。您也可以尝试将“从”更改为“0％”

@-webkit-keyframes slideUp {
    0% { background-position: left 50em, right 50em, left 50em, right 50em; }
    to { background-position: left bottom, right bottom, left bottom, right bottom; }
}

在IE中遇到关键帧背景动画的一些问题

1 个答案: