Question

我有一个在加载页面时运行的CSS动画。它将图像从小到大缩放，并使用不透明度淡化。

它适用于所有浏览器，除了....是的.... MSIE。我在Windows 8上使用MSIE。

无论视口大小如何，MSIE似乎都在使用智能手机CSS。

如果我从智能手机CSS中删除动画类，它会使用正确的CSS。在Inspector中，它声称它正在使用正确的样式表。

为什么会发生这种情况的任何想法？

在将动画类放入智能手机和平板电脑的CSS文件后，这个问题就开始了。是否有某些原因MSIE不支持响应式CSS动画或其他什么？如果我从智能手机CSS文件中删除动画类，MSIE将按预期工作。

提前谢谢！

代码（花括号是Shopify Liquid标签）

HTML - 外部CSS链接

    {{ 'core.scss' | asset_url | stylesheet_tag }}
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" media="only screen and (min-width:680px) and (max-width:980px) and (orientation:portrait)" href="{{ 'tabletportrait.css' | asset_url }}" />
    <link rel="stylesheet" media="only screen and (min-width:0px) and (max-width:679px)" href="{{ 'smartphone.css' | asset_url }}" />

HTML - DIV打算动画

    <div id="imgWatermark" class="imgWatermark">
      <img src="{{ 'imgLogo.png' | asset_url }}" alt="Logo" id="mainLogoImg" class="mainLogoImg">
      <img src="{{ 'bgGradient_lg.png' | asset_url }}" id="mainLogoImgBg" class="mainLogoImgBg">
    </div>

的Javascript

  imgWatermarkEl = document.getElementById('imgWatermark');
  mainLogoImgEl = document.getElementById('mainLogoImg');
  mainLogoImgBgEl = document.getElementById('mainLogoImgBg');

  // Display the imgWatermark DIV container
  imgWatermarkEl.style.display = 'block';

  // Start the mainLogoImg animation
  mainLogoImgEl.style.animation = 'mainLogoImg_ani 1s forwards';
  mainLogoImgEl.style.webkitAnimation = 'mainLogoImg_ani 1s forwards';

  // Start the mainLogoImgBg animation
  mainLogoImgBgEl.style.animation = 'mainLogoImgBg_ani 1s forwards';
  mainLogoImgBgEl.style.webkitAnimation = 'mainLogoImgBg_ani 1s forwards';

  // Initiate animation event listeners
  mainLogoImgEl.addEventListener('animationend', showItems);
  mainLogoImgEl.addEventListener('webkitAnimationEnd', showItems);

CSS - 核心

.imgWatermark {
    display: none;
    height: 100%;
    width: 100%;
    margin: auto auto;
    overflow: hidden;
    z-index: 25;
}

.mainLogoImg {
    display: block;
    position: fixed;  
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 501px;
    width: 586px;   
    margin: auto auto;  
    z-index: 25;
    opacity: 0;
    transition: opacity 1s;

    // The properties below are being set in Javascript after the main site navigation loads
    // animation: mainLogoImg_ani 1s forwards;
    // -webkit-animation: mainLogoImg_ani 1s forwards;
}

.mainLogoImgBg {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 400px;
    width: 500px;
    margin: auto auto;
    z-index: 20;
    opacity: 0;
    transition: opacity 1s;

    // The properties below are being set in Javascript after the main site navigation loads
    // animation: mainLogoImgBg_ani 1s forwards;
    // -webkit-animation: mainLogoImgBg_ani 1s forwards;
}

@keyframes mainLogoImg_ani {
    0% {
        height: 0;
        width: 0;
        opacity: 0;
    }

    80% {
        height: 501px;
        width: 586px;
        opacity: 1.0;
    }

    100% {
        height: 501px;
        width: 586px;
        opacity: 0.1;
    }
}

@-webkit-keyframes mainLogoImg_ani {
    0% {
        height: 0;
        width: 0;
        opacity: 0;
    }

    80% {
        height: 501px;
        width: 586px;
        opacity: 1.0;
    }

    100% {
        height: 501px;
        width: 586px;
        opacity: 0.1;
    }
}

CSS - 智能手机

.mainLogoImg {  
}

.mainLogoImgBg {

}

@keyframes mainLogoImg_ani {
    0% {
        height: 0px;
        width: 0px;
        opacity: 0;
    }

    80% {
        height: 251px;
        width: 293px;
        opacity: 1.0;
    }

    100% {
        height: 251px;
        width: 293px;
        opacity: 0.1;
    }
}

@-webkit-keyframes mainLogoImg_ani {
0% {
   height: 0px;
   width: 0px;
   opacity: 0;
}

80% {
    height: 251px;
    width: 293px;
    opacity: 1.0;
}

    100% {
        height: 251px;
        width: 293px;
        opacity: 0.1;
    }
}

MSIE使用智能手机CSS进行动画制作

0 个答案: