CODEWITHSUNDEEP
htmlcsscss-animationsinternet-explorer-11
Sagar Raj
Sagar Raj

Reputation: 939

CSS3 animation issue in IE11

I am facing an issue in css3 animation in IE11 only.

Here is link with issue (please open in 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

Issue: For first time, the animation is working good. When I toggle by clicking on toggle button the animation is not happening for 1st and last bar. This is working fine in chrome and in all mobile devices.

Let me know if anybody figured it out and do the needful

Upvotes: 2

Views: 1655

Answers (2)

Viduthalai
Viduthalai

Reputation: 158

Try this little hack for your IE

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

Upvotes: 0

StudioTime
StudioTime

Reputation: 24019

It's a weird one this but here's a fix:

Change your html to this:

<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>

Instead of hiding the element we simply change the class on it to show the animation, or not

Here's an updated fiddle working in ie11

Upvotes: 1

Related Questions