CSS Animation w/ Translates Not Working in Internet Explorer

Question

I have a simple SVG animation consisting of three circles that "jump" via translateY transforms. It works fine in Firefox and Chrome, but not IE11. I've run the code through a prefixer, so I don't think it's an issue there, but I can't figure out what's going wrong.

https://jsfiddle.net/cuj06coe/

@-webkit-keyframes loading-circles-jump {
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  33% {
    -webkit-transform: translateY(-12px);
    transform: translateY(-12px);
    opacity: .4;
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@keyframes loading-circles-jump {
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  33% {
    -webkit-transform: translateY(-12px);
    transform: translateY(-12px);
    opacity: .4;
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

.loading-circles {
  height: 10px;
  width: 25px;
}

.loading-circles circle {
  fill: @UserImgBackgroundColor;
}

.loading-circles .loading-circle-1 {
  -webkit-animation: loading-circles-jump 1s ease infinite;
  animation: loading-circles-jump 1s ease infinite;
}

.loading-circles .loading-circle-2 {
  -webkit-animation: loading-circles-jump 1s .3s ease infinite;
  animation: loading-circles-jump 1s .3s ease infinite;
}

.loading-circles .loading-circle-3 {
  -webkit-animation: loading-circles-jump 1s .6s ease infinite;
  animation: loading-circles-jump 1s .6s ease infinite;
}

<svg class="loading-circles" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190 50">
  <circle class="loading-circle-1" cx="25" cy="25" r="25" />
  <circle class="loading-circle-2" cx="95" cy="25" r="25" />
  <circle class="loading-circle-3" cx="165" cy="25" r="25" />    
</svg>

As you've already discovered. Internet Explorer does not support CSS animation on SVG elements. — Robert Longson, Jun 14 '17 at 20:36
@RobertLongson This one works on IE ... http://jsfiddle.net/z8w4vuau/945/ ... why does this work and not the above? — Asons, Jun 14 '17 at 20:38
@RobertLongson Ahh.. one can animate the SVG element but not its children ? — Asons, Jun 14 '17 at 20:42
@RobertLongson Thanks, if you want to add this as an answer I'll mark it as correct. — Tim, Jun 14 '17 at 20:44
https://developer.microsoft.com/en-us/microsoft-edge/platform/status/csstransitionsforsvgelements/ transitions on SVG element is Edge only according to Microsoft themselves — Robert Longson, Jun 14 '17 at 20:44
@RobertLongson Yeah... found an answer here at SO too ... so I closed as a dupe — Asons, Jun 14 '17 at 20:45
@Tim And the workaround is to create 3 SVG, 1 for each circle, and then animate those — Asons, Jun 14 '17 at 20:48

CSS Animation w/ Translates Not Working in Internet Explorer

0 Answers0