CSS3 IE11 中的动画问题

Question

我仅在 IE11 中遇到 css3 动画问题。

这里link有问题（请在ie11中打开）

$(document).ready(function() {
  $(".spinnerTinyBar").show();
  $("#toggle").click(function() {
    $(".spinnerTinyBar").toggle();
  });
});

@keyframes tinybar-load1 {
  0% {
    box-shadow: 0 0 blue;
    height: 20px;
  }
  40% {
    box-shadow: 0 -15px blue;
    height: 25px;
  }
  80% {
    box-shadow: 0 0 blue;
    height: 20px;
  }
  100% {
    box-shadow: 0 0 blue;
    height: 20px;
  }
}

.spinnerTinyBar,
.spinnerTinyBar:before,
.spinnerTinyBar:after {
  background: blue;
  animation: tinybar-load1 1s infinite ease-in-out;
  width: 2px;
  height: 20px;
}

.spinnerTinyBar:before {
  left: -5px;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinnerTinyBar {
  font-size: 9px;
  position: relative;
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
  transform: translateZ(0);
}

.spinnerTinyBar:after {
  left: 5px;
}

.spinnerTinyBar:before,
.spinnerTinyBar:after {
  position: absolute;
  top: 0;
  content: "";
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" id="toggle" value="Toggle" />
<div class="spinnerTinyBar"></div>

JSFiddle

问题：动画第一次运行良好。当我通过单击切换按钮进行切换时，第一个和最后一个栏的动画不会发生。这在 chrome 和所有移动设备上运行良好。

让我知道是否有人想出办法并做必要的事情

Answer 1

这是一个奇怪的问题，但这里有一个解决方法：

将您的 html 更改为：

<body>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
            $(".spinnerTinyBar").show();
            $("#toggle").click(function(){
            $(".divClass").toggleClass('spinnerTinyBar');

            });
            });

        </script>
        <input type="button" id="toggle" value="Toggle"/>
        <div class="divClass spinnerTinyBar"></div>
    </body>

我们不隐藏元素，而是简单地更改其上的 class 以显示动画，或者不显示

Here's an updated fiddle working in ie11

Answer 2

为您的 IE 尝试这个小技巧

@media screen and (min-width: 0[=10=]) {
  .your-animation-parent {
    transform: translate3d(0, 0, 0);
   }
}

CSS3 IE11 中的动画问题

CSS3 animation issue in IE11

html

css

css-animations

internet-explorer-11