Css动画在Internet Explorer中不起作用,改变了不透明度

时间:2015-07-09 20:15:41

标签: css internet-explorer animation

Css动画无法在Internet Explorer 11版本中运行。 所有其他浏览器都非常好用。这是一个网站:http://susannahpryce.esy.es

我在IE中查看了firebug,它没有错误地读取代码,所以我不知道它为什么不工作,我使用的是IE 11。

这是我的代码

body .main .header-box {
    background-color: #fff;
    height: 500px;
    width: 100%;
    float: left; }
    body .main .header-box .slide-area {
      margin: 0 9%; }
      body .main .header-box .slide-area #pic1 {
        position: absolute;
        z-index: 5;
        -webkit-animation-duration: 60s;
        -webkit-animation-delay: 10s;
        -webkit-transition-timing-function: ease;
        -webkit-animation-name: slide-fade;
        -webkit-animation-iteration-count: infinite;
        -ms-animation-duration: 60s;
        -ms-animation-delay: 10s;
        -ms-transition-timing-function: ease;
        -ms-animation-name: slide-fade;
        -ms-animation-iteration-count: infinite;
        -moz-animation-duration: 60s;
        -moz-animation-delay: 10s;
        -moz-transition-timing-function: ease;
        -moz-animation-name: slide-fade;
        -moz-animation-iteration-count: infinite; }
      body .main .header-box .slide-area #pic2 {
        position: absolute;
        z-index: 4;
        -webkit-animation-duration: 60s;
        -webkit-animation-delay: 20s;
        -webkit-transition-timing-function: ease;
        -webkit-animation-name: slide-fade;
        -webkit-animation-iteration-count: infinite;
        -ms-animation-duration: 60s;
        -ms-animation-delay: 20s;
        -ms-transition-timing-function: ease;
        -ms-animation-name: slide-fade;
        -ms-animation-iteration-count: infinite;
        -moz-animation-duration: 60s;
        -moz-animation-delay: 20s;
        -moz-transition-timing-function: ease;
        -moz-animation-name: slide-fade;
        -moz-animation-iteration-count: infinite; }
      body .main .header-box .slide-area #pic3 {
        position: absolute;
        z-index: 3;
        -webkit-animation-duration: 60s;
        -webkit-animation-delay: 30s;
        -webkit-transition-timing-function: ease;
        -webkit-animation-name: slide-fade;
        -webkit-animation-iteration-count: infinite;
        -ms-animation-duration: 60s;
        -ms-animation-delay: 30s;
        -ms-transition-timing-function: ease;
        -ms-animation-name: slide-fade;
        -ms-animation-iteration-count: infinite;
        -moz-animation-duration: 60s;
        -moz-animation-delay: 30s;
        -moz-transition-timing-function: ease;
        -moz-animation-name: slide-fade;
        -moz-animation-iteration-count: infinite; }
      body .main .header-box .slide-area #pic4 {
        position: relative;
        z-index: 2; }
  @-webkit-keyframes slide-fade {
  0% {
  opacity: 1; }
  5% {
  opacity: 0; }
  50% {
  opacity: 0; }
  55% {
  opacity: 1; }
  100% {
  opacity: 1; } }
  @-ms-keyframes slide-fade {
  0% {
  opacity: 1; }
  5% {
  opacity: 0; }
  50% {
  opacity: 0; }
  55% {
  opacity: 1; }
  100% {
  opacity: 1; } }
  @-moz-keyframes slide-fade {
  0% {
  opacity: 1; }
  5% {
  opacity: 0; }
  50% {
  opacity: 0; }
  55% {
  opacity: 1; }
  100% {
  opacity: 1; } }

2 个答案:

答案 0 :(得分:2)

从媒体查询中取出动画css。我做了一个简单的复制和粘贴,并编辑了一点点css使其工作。如此处所述[{3}}(感谢Paulie_D)在已知问题标签

  

IE10和IE11不支持媒体查询中的CSS动画。

http://caniuse.com/#search=css-animation

  <div class="header-box">
      <div class="slide-area">
         <img id="pic1" src="http://susannahpryce.esy.es/wp-content/themes/sue/pics/hq-1-optimized.jpg" />
         <img id="pic2" src="http://susannahpryce.esy.es/wp-content/themes/sue/pics/hq-2-optimized.jpg" />
         <img id="pic3" src="http://susannahpryce.esy.es/wp-content/themes/sue/pics/hq-3-optimized.jpg" />
         <img id="pic4" src="http://susannahpryce.esy.es/wp-content/themes/sue/pics/hq-4-optimized.jpg" />
      </div>

      <div class="slide-area_480">
      </div>

      <div class="slide-area_640">
      </div>

   </div>

您还应该将正常的css规则放在文件中,就像没有前缀一样。现代浏览器不应该需要前缀,并且在将来,前缀应该在某个时候消失...对于这个动画的东西无论如何

答案 1 :(得分:1)

  

历史上,IE并没有将几种风格应用于不适用的元素   &#34;有布局。&#34;

     

请参阅:http://www.satzansatz.de/cssd/onhavinglayout.html

Here是一个有关IE中不透明度的问题。