我的情况只发生在IE11上.Chrome,Firefox,Safari(平板电脑和手机)都按预期工作.我已经创建了一个面板(DIV)的过渡,它从侧面滑入/滑出.在页面加载时,它不应该"动画",而是捕捉到适当的位置.但是在IE11页面加载时,只有当媒体查询涉及与选择器的最高CSS特异性级别相匹配的媒体查询时,才会"播放"转换.奇怪的是媒体查询甚至不合适(在我的测试中加载页面时不应该应用).

以下简单代码重复了我的问题:

CSS

.standard {
  transition: all 1s ease-in-out;
  transform: rotate(45deg);
  width:50px;  height:50px;  border:1px solid black;  background-color:green;   margin:3em;
}

button + .standard {
  transform: rotate(30deg);
}

button.on + .standard {
  transform:rotate(0deg);
}

/* REMOVE THE FOLLOWING COMMENTS to see issue on page load using IE11 - make sure window is larger than 800 pixels */
/*
@media only screen and (max-width:800px) {
  button.on + .standard {
    background-color:red;
    transform:rotate(270deg);
  }
}
*/

HTML

<button class="on" onclick="this.classList.toggle('on');">Rotate Test</button>
<div class="standard">&nbsp;</div> …