Question

我接手的网站正在使用CSS3动画为滑块供电。

它们似乎在Chrome / Safari / Firefox中运行良好但由于某些原因，在IE11中，当您最初第一次点击该页面时，它们将无法加载。

如果您在页面上刷新或打开chrome dev工具，那么它们可以正常工作（禁止最后一个卡住？）。

在浏览了几篇相关文章之后，我将关键帧移到了我的css表的顶部，但它似乎没有任何区别。

有人可以告诉我我错过了什么吗？

#slide0 {
    background-image:url('../../img/auto-enrol-slide.png'); 
    background-position: left bottom -600px;
    background-size: cover;
    background-color:#6CA1C1;
}
#slide0.animate {
   -webkit-animation-delay: 0s;
   -webkit-animation-duration: 0.85s;
   -webkit-animation-name: backgroundUp2;
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-iteration-count: 1;
   -webkit-animation-fill-mode: forwards;
   -moz-animation-delay: 0s;
   -moz-animation-duration: 0.85s;
   -moz-animation-name: backgroundUp2;
   -moz-animation-timing-function: ease-in-out;
   -moz-animation-iteration-count: 1;
   -moz-animation-fill-mode: forwards;
   -o-animation-delay: 0s;
   -o-animation-duration: 0.85s;
   -o-animation-name: backgroundUp2;
   -o-animation-timing-function: ease-in-out;
   -o-animation-iteration-count: 1;
   -o-animation-fill-mode: forwards;
   animation-delay: 0s;
   animation-duration: 0.85s;
   animation-name: backgroundUp2;
   animation-timing-function: ease-in-out;
   animation-iteration-count: 1;
   animation-fill-mode: forwards;
}

@-webkit-keyframes backgroundUp2 {
    0% {background-position: left bottom -600px; }
    100% {background-position: left bottom -100px; } 
}

@-moz-keyframes backgroundUp2 {
    0% { background-position: left bottom -600px; }
    100% { background-position: left bottom -100px; } 
}

@-ms-keyframes backgroundUp2 {
    0% { background-position: left bottom -600px; }
    100% {background-position: left bottom -100px; } 
}

@keyframes backgroundUp2 {
    0% {background-position: left bottom -600px; }
    100% {background-position: left bottom -100px; } 
}

FULL STYLESHEET >>

Answer 1

对于任何可能偶然发现这一点的人，我让它发挥作用 - 我将参数中的值更改为所有像素单位。

当你混合和匹配属性值时，IE似乎不喜欢它。

@-webkit-keyframes backgroundUp2 {
    0% {background-position: 0 360px ; }
    100% {background-position: 0 -50px; } 
}

@-moz-keyframes backgroundUp2 {
    0% { background-position: 0 360px ; }
    100% { background-position: 0 -50px; }
}

@-ms-keyframes backgroundUp2 {
    0% { background-position: 0 360px ; }
    100% {background-position:0 -50px; } 
}

@keyframes backgroundUp2 {
    0% {background-position: 0 360px ; }
    100% {background-position:0 -50px; } 
}

#slide0 {
    background-image:url('../../img/auto-enrol-slide.png'); 
    background-position-x:0;
    background-position-y:360px;
    background-size: cover;
    background-color: #6CA1C1;
}

CSS3动画仅适用于IE 11中的页面刷新

1 个答案: