IE10 CSS动画的问题 [英] IE10 CSS animation issue

查看：188
本文介绍了IE10 CSS动画的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我遇到的问题是，一个网站，我已经建立了完美的在所有浏览器和旧版本的IE浏览器，但不是最新版本的作品的一小部分。正如你可能知道，IE浏览器不再支持[IF]的HTML语句，似乎不支持的命令。我的问题是使用以下CSS一些图片的小动画：

  .fadein IMG {
    位置：绝对的;
    显示：块;
    保证金左：自动;
    保证金右：自动;
    -webkit-动画名：褪色;
    -webkit-动画迭代计数：无限;
    -webkit-动画持续时间：32秒;
    动画名：褪色;
    动画迭代计数：无限;
    动画持续时间：32秒;
}@ -webkit-关键帧淡出{
    0％{不透明度：0;}
    20％{不透明度：1;}
    33％{不透明度：0;}
    53％{不透明度：0;}
    100％{不透明度：0;}
}
@keyframes褪色{
    0％{不透明度：0;}
    20％{不透明度：1;}
    33％{不透明度：0;}
    53％{不透明度：0;}
    100％{不透明度：0;}
}
＃{F1
    -webkit-动画延迟：-4S;
}
＃{F2
    -webkit-动画延迟：-8S;
}
＃{F3
    -webkit-动画延迟：-16s;
}
＃F4 {
    -webkit-动画延迟：-24s;
}
＃{F5
    -webkit-动画延迟：-32s;
}

这是目前在网页 http://www.portsmouthtap.co.uk 上使用页脚近几年的报价。从我已经做了研究，IE应该在CSS中接受动画名称等，应该能够效仿其自身的previous版本。我一直在使用JS来模拟一个旧版本试过，太，但这带来了相同的结果。我敢肯定，我一定是缺少明显的东西，所以如果有人可以帮助，这将会是很大的AP preciated，谢谢。

PS。在IE的新版本，图像确实显示了，淡出，但所有在一次，然后不重复，这显然是不想要的效果。请参阅网站的Chrome版本看到动画是如何为了看看，谢谢你。

对应的HTML：

 ＆LT; D​​IV ID =引用的图像级=淡入＆GT;
    ＆所述; IMG的id =F5SRC =IMG / quote_05.jpgALT =＆GT;
    ＆LT; IMG ID =F4SRC =IMG / quote_04.jpgALT =＆GT;
    ＆LT; IMG ID =F3SRC =IMG / quote_01.jpgALT =＆GT;
    ＆所述; IMG的id =F2SRC =IMG / quote_02.jpgALT =＆GT;
    ＆所述; IMG的id =F1SRC =IMG / quote_03.jpgALT =＆GT;
＆LT; / DIV＆GT;


解决方案

通过运行它 prefixr ：

我得到这个：

  .fadein IMG {
    位置：绝对的;
    显示：块;
    保证金左：自动;
    保证金右：自动;    -webkit-动画名：褪色;
    -moz-动画名：褪色;
    -ms动画名：褪色;
    -o-动画名：褪色;
    动画名：褪色;    -webkit-动画迭代计数：无限;
    -moz-动画迭代计数：无限;
    -ms动画迭代计数：无限;
    -o-动画迭代计数：无限;
    动画迭代计数：无限;
    -webkit-动画持续时间：32秒;
    动画持续时间：32秒;
}@keyframes褪色{
 0％{
    -ms过滤器进程id：DXImageTransform.Microsoft.Alpha（不透明度= 0）;
    过滤器：α（不透明度= 0）;
    不透明度：0;
 }
 20％{
    -ms过滤器进程id：DXImageTransform.Microsoft.Alpha（不透明度= 100）;
    过滤器：α（不透明度= 100）;
    不透明度：1;
 }
 33％{
    -ms过滤器进程id：DXImageTransform.Microsoft.Alpha（不透明度= 0）;
    过滤器：α（不透明度= 0）;
    不透明度：0;
 }
 53％{
    -ms过滤器进程id：DXImageTransform.Microsoft.Alpha（不透明度= 0）;
    过滤器：α（不透明度= 0）;
    不透明度：0;
 }
 100％{
    -ms过滤器进程id：DXImageTransform.Microsoft.Alpha（不透明度= 0）;
    过滤器：α（不透明度= 0）;
    不透明度：0;
 }}@ -moz-关键帧淡出{
 0％{
   过滤器：α（不透明度= 0）;
   不透明度：0;
 }
 20％{
   过滤器：α（不透明度= 100）;
   不透明度：1;
 }
 33％{
   过滤器：α（不透明度= 0）;
   不透明度：0;
 }
 53％{
   过滤器：α（不透明度= 0）;
   不透明度：0;
 }
 100％{
   过滤器：α（不透明度= 0）;
   不透明度：0;
 }}@ -webkit-关键帧褪色{
 0％{
   过滤器：α（不透明度= 0）;
   不透明度：0;
 }
 20％{
   过滤器：α（不透明度= 100）;
   不透明度：1;
 }
 33％{
   过滤器：α（不透明度= 0）;
   不透明度：0;
 }
 53％{
   过滤器：α（不透明度= 0）;
   不透明度：0;
 }
 100％{
   过滤器：α（不透明度= 0）;
   不透明度：0;
 }}@ -ms关键帧变脸{
 0％{
   -ms过滤器进程id：DXImageTransform.Microsoft.Alpha（不透明度= 0）;
   过滤器：α（不透明度= 0）;
   不透明度：0;
 }
 20％{
   -ms过滤器进程id：DXImageTransform.Microsoft.Alpha（不透明度= 100）;
   过滤器：α（不透明度= 100）;
   不透明度：1;
 }
 33％{
   -ms过滤器进程id：DXImageTransform.Microsoft.Alpha（不透明度= 0）;
   过滤器：α（不透明度= 0）;
   不透明度：0;
 }
 53％{
   -ms过滤器进程id：DXImageTransform.Microsoft.Alpha（不透明度= 0）;
   过滤器：α（不透明度= 0）;
   不透明度：0;
 }
 100％{
   -ms过滤器进程id：DXImageTransform.Microsoft.Alpha（不透明度= 0）;
   过滤器：α（不透明度= 0）;
   不透明度：0;
 }}@ -o-关键帧变脸{
 0％{
   过滤器：α（不透明度= 0）;
   不透明度：0;
 }
 20％{
   过滤器：α（不透明度= 100）;
   不透明度：1;
 }
 33％{
   过滤器：α（不透明度= 0）;
   不透明度：0;
 }
 53％{
   过滤器：α（不透明度= 0）;
   不透明度：0;
 }
 100％{
   过滤器：α（不透明度= 0）;
   不透明度：0;
 }}＃{F1
    -webkit-动画延迟：-4S;
    -moz-动画延迟：-4S;
    -ms动画延迟：-4S;
    -o-动画延迟：-4S;
    动画延迟：-4S;
}＃{F2
    -webkit-动画延迟：-8S;
    -moz-动画延迟：-8S;
    -ms动画延迟：-8S;
    -o-动画延迟：-8S;
    动画延迟：-8S;
}＃{F3
    -webkit-动画延迟：-16s;
    -moz-动画延迟：-16s;
    -ms动画延迟：-16s;
    -o-动画延迟：-16s;
    动画延迟：-16s;
}＃F4 {
    -webkit-动画延迟：-24s;
    -moz-动画延迟：-24s;
    -ms动画延迟：-24s;
    -o-动画延迟：-24s;
    动画延迟：-24s;
}＃{F5
    -webkit-动画延迟：-32s;
    -moz-动画延迟：-32s;
    -ms动画延迟：-32s;
    -o-动画延迟：-32s;
    动画延迟：-32s;
}

请确保您包括所有的浏览器prefixes的兼容性！

The problem I'm having is that a small section of a website I have built works perfectly on all browsers and on old versions of IE but not on the newest versions. As you may know, IE no longer supports [IF] statements in HTML and doesn't seem to support the command. My problem is with a small animation of a few images using the following CSS:

.fadein img {
    position:absolute;
    display: block;
    margin-left: auto;
    margin-right: auto;
    -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 32s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 32s;
}

@-webkit-keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 0;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 0;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}
#f1 {
    -webkit-animation-delay: -4s;
}
#f2 {
    -webkit-animation-delay: -8s;
}
#f3 {
    -webkit-animation-delay: -16s;
}
#f4 {
    -webkit-animation-delay: -24s;
}
#f5 {
    -webkit-animation-delay: -32s;
}

this is currently in use on the web page http://www.portsmouthtap.co.uk to few quotes near the footer. From the research I have done, IE should accept "animation-name" etc within the CSS and should be able to emulate a previous version of itself. I have tried using js to emulate an older version, too, yet this brings the same results. I'm sure I must be missing something obvious so if anyone could help, it'd be greatly appreciated, thanks.

ps. in the newer versions of IE, the images do show up, and fade out, but all at once, then do not repeat, which is obviously not the desired effect. Please refer to the Chrome version of the site to see how the animation is meant to look, thank you.

corresponding html:

<div id="Quote-Images" class="fadein">
    <img id="f5" src="img/quote_05.jpg" alt="">
    <img id="f4" src="img/quote_04.jpg" alt="">
    <img id="f3" src="img/quote_01.jpg" alt="">
    <img id="f2" src="img/quote_02.jpg" alt="">
    <img id="f1" src="img/quote_03.jpg" alt="">
</div>

解决方案

Running it through Prefixr:

I got this:

.fadein img {
    position: absolute;
    display: block;
    margin-left: auto;
    margin-right: auto;

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

    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 32s;
    animation-duration: 32s;
}

@keyframes "fade" {
 0% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
 }
 20% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
 }
 33% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
 }
 53% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
 }
 100% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
 }

}

@-moz-keyframes fade {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 20% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
 33% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 53% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   filter: alpha(opacity=0);
   opacity: 0;
 }

}

@-webkit-keyframes "fade" {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 20% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
 33% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 53% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   filter: alpha(opacity=0);
   opacity: 0;
 }

}

@-ms-keyframes "fade" {
 0% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
 }
 20% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
 }
 33% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
 }
 53% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
 }

}

@-o-keyframes "fade" {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 20% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
 33% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 53% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   filter: alpha(opacity=0);
   opacity: 0;
 }

}

#f1 {
    -webkit-animation-delay: -4s;
    -moz-animation-delay: -4s;
    -ms-animation-delay: -4s;
    -o-animation-delay: -4s;
    animation-delay: -4s;
}

#f2 {
    -webkit-animation-delay: -8s;
    -moz-animation-delay: -8s;
    -ms-animation-delay: -8s;
    -o-animation-delay: -8s;
    animation-delay: -8s;
}

#f3 {
    -webkit-animation-delay: -16s;
    -moz-animation-delay: -16s;
    -ms-animation-delay: -16s;
    -o-animation-delay: -16s;
    animation-delay: -16s;
}

#f4 {
    -webkit-animation-delay: -24s;
    -moz-animation-delay: -24s;
    -ms-animation-delay: -24s;
    -o-animation-delay: -24s;
    animation-delay: -24s;
}

#f5 {
    -webkit-animation-delay: -32s;
    -moz-animation-delay: -32s;
    -ms-animation-delay: -32s;
    -o-animation-delay: -32s;
    animation-delay: -32s;
}

Make sure you include all browser prefixes for compatibility!

这篇关于IE10 CSS动画的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆