CSS Animation not working in IE/Edge

Question

How can this thing work in IE/Edge? i don't understand why it doesn't.

When i add a class to an element its border becomes dashed and starts rotating.

$("#btn").click(function () {
  $(".bg")[0].classList.toggle("rotate");
})

@keyframes PDFgenerating {
  to {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.bg circle {
  fill:white;
  stroke: blue;
}
.bg circle {
  -moz-transition : stroke-dasharray cubic-bezier(0.4, 0, 0.2, 1) .7s;
  -o-transition  : stroke-dasharray cubic-bezier(0.4, 0, 0.2, 1) .7s;
  -webkit-transition: stroke-dasharray cubic-bezier(0.4, 0, 0.2, 1) .7s;
  transition   : stroke-dasharray cubic-bezier(0.4, 0, 0.2, 1) .7s;
  stroke-dasharray : 290 !important;
}

.bg.rotate circle {
  -moz-transition: stroke-dasharray cubic-bezier(0.4, 0, 0.2, 1) .7s;
  -o-transition: stroke-dasharray cubic-bezier(0.4, 0, 0.2, 1) .7s;
  -webkit-transition: stroke-dasharray cubic-bezier(0.4, 0, 0.2, 1) .7s;
  transition: stroke-dasharray cubic-bezier(0.4, 0, 0.2, 1) .7s;
  -moz-animation: PDFgenerating linear 5s infinite reverse;
  -o-animation: PDFgenerating linear 5s infinite reverse;
  -webkit-animation: PDFgenerating linear 5s infinite reverse;
  animation: PDFgenerating linear 5s infinite reverse;
  stroke-dasharray: 28 !important;
  -moz-transform-origin: center;
  -ms-transform-origin: center;
  -o-transform-origin: center;
  -webkit-transform-origin: center;
  transform-origin: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myIcon" style = "width:100px"><svg viewBox="0 0 100 100" focusable="false"><g class="bg"><circle cx="50" cy="50" r="45.56" style="stroke-width:4.44;stroke-linecap:butt;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0"></circle></g><g class="fg" transform="translate(50,50) scale(0.5) translate(-50,-50)"><g transform="matrix(0.19920319,0,0,0.19920319,2.5095651e-4,-1.38e-6)"> <g> <path d="m 478.482,448.601 -101.6,-101.599 c 8.089,-15.262 12.339,-32.29 12.339,-49.717 0,-35.689 -18.182,-69.164 -47.804,-88.743 V 92.53 c 0,-2.652 -1.054,-5.196 -2.929,-7.071 L 255.959,2.929 C 254.083,1.054 251.54,0 248.888,0 H 24.371 c -5.522,0 -10,4.477 -10,10 v 427.735 c 0,5.523 4.478,10 10,10 h 307.046 c 5.522,0 10,-4.477 10,-10 v -37.722 l 92.825,92.825 c 5.908,5.908 13.764,9.162 22.119,9.162 8.356,0 16.212,-3.254 22.12,-9.162 12.197,-12.196 12.197,-32.041 0.001,-44.237 z M 307.276,82.53 H 258.889 V 34.143 l 24.193,24.193 24.194,24.194 z m 14.141,313.847 v 31.358 H 34.371 V 20 h 204.517 v 72.53 c 0,5.523 4.478,10 10,10 h 72.529 v 95.662 l 0.009,0.014 c -12.214,-4.741 -25.275,-7.215 -38.499,-7.215 -58.61,0 -106.294,47.683 -106.294,106.293 0,58.61 47.684,106.293 106.294,106.293 13.224,0 26.285,-2.474 38.499,-7.215 l -0.009,0.015 z m 7.531,-26.086 c -0.848,0.536 -1.706,1.057 -2.574,1.563 -13.131,7.67 -28.154,11.724 -43.446,11.724 -47.583,0 -86.294,-38.711 -86.294,-86.293 0,-47.582 38.711,-86.293 86.294,-86.293 15.291,0 30.315,4.054 43.447,11.724 26.428,15.435 42.846,44.008 42.846,74.569 0,16.35 -4.595,32.264 -13.289,46.022 -6.835,10.818 -16.166,20.148 -26.984,26.984 z m 135.391,108.405 c -2.131,2.131 -4.964,3.304 -7.978,3.304 -3.014,0 -5.847,-1.173 -7.977,-3.304 l -98.706,-98.706 -0.008,-0.001 c 5.856,-4.74 11.221,-10.104 15.961,-15.96 l 0.001,0.008 98.707,98.707 c 4.398,4.398 4.398,11.554 0,15.952 z"></path> <path d="m 246.838,238.403 c -20.641,12.674 -32.964,34.686 -32.964,58.882 0,5.523 4.478,10 10,10 5.522,0 10,-4.477 10,-10 0,-17.19 8.759,-32.83 23.429,-41.838 4.707,-2.89 6.179,-9.048 3.289,-13.754 -2.89,-4.707 -9.048,-6.18 -13.754,-3.29 z"></path> <path d="m 317.708,237.624 c -10.52,-6.145 -22.547,-9.392 -34.781,-9.392 -5.522,0 -10,4.477 -10,10 0,5.523 4.478,10 10,10 8.693,0 17.232,2.304 24.693,6.662 1.586,0.926 3.321,1.367 5.034,1.367 3.438,0 6.785,-1.775 8.645,-4.958 2.786,-4.77 1.178,-10.894 -3.591,-13.679 z"></path> </g> </g></g></svg></div>
<br>
<button id = "btn">animate</button>

I already tried to use % in trasform-origin and use 0% and 100% in the keyframe as found in some quite similar questions.

can you add your html along with this code? – bubesh Oct 25 '17 at 09:05 — bubesh, Oct 25 '17 at 09:05
hey @bubesh, i added a snippet :) – marco burrometo Oct 25 '17 at 09:18 — marco burrometo, Oct 25 '17 at 09:18

score 1 · Accepted Answer · answered Oct 25 '17 at 10:36

1

It seems that transform on SVG doesn't work if used via CSS in IE and that why the rotation animation doesn't work
Found this SO link which explains it CSS transform on SVG Elements IE9+
and also in IE site it was logged as bug https://connect.microsoft.com/IE/feedback/details/811744/ie11-bug-with-implementation-of-css-transforms-in-svg

answered Oct 25 '17 at 10:36

bubesh

426
1
4
15

1

“That is annoying, but tolerable.” – marco burrometo Oct 25 '17 at 10:42
1

I think i'll apply the workaround found on your first link. Many thanks – marco burrometo Oct 25 '17 at 10:43
1

you can create that spinning circle with CSS instead of SVG and place the icon inside it and apply the animation, it should work like https://codepen.io/phliem/pen/vKQoBr – bubesh Oct 25 '17 at 11:18
And how about animating the stroke-dashoffset attribute? It would not require transform!! i tryed but with no result :(. – marco burrometo Oct 25 '17 at 12:18
1

hmm... i am not sure but can you send that code in jsfiddle – bubesh Oct 25 '17 at 12:31
take a look to the next answer :) – marco burrometo Oct 25 '17 at 12:43

score -1 · Answer 2 · answered Oct 25 '17 at 12:42

$("#btn").click(function () {
  $(".bg")[0].classList.toggle("rotate");
})

@keyframes PDFgenerating {
  from {
    stroke-dashoffset : 0;
  }
  to {
    stroke-dashoffset : 500;
  }
}
.bg circle {
  fill:white;
  stroke: blue;
}
.bg circle {
  -moz-transition : stroke-dasharray cubic-bezier(0.4, 0, 0.2, 1) .7s;
  -o-transition  : stroke-dasharray cubic-bezier(0.4, 0, 0.2, 1) .7s;
  -webkit-transition: stroke-dasharray cubic-bezier(0.4, 0, 0.2, 1) .7s;
  transition   : stroke-dasharray cubic-bezier(0.4, 0, 0.2, 1) .7s;
  stroke-dasharray : 290 !important;
}

.bg.rotate circle {
  -moz-transition: stroke-dasharray cubic-bezier(0.4, 0, 0.2, 1) .7s;
  -o-transition: stroke-dasharray cubic-bezier(0.4, 0, 0.2, 1) .7s;
  -webkit-transition: stroke-dasharray cubic-bezier(0.4, 0, 0.2, 1) .7s;
  transition: stroke-dasharray cubic-bezier(0.4, 0, 0.2, 1) .7s;
  -moz-animation: PDFgenerating linear 5s infinite;
  -o-animation: PDFgenerating linear 5s infinite;
  -webkit-animation: PDFgenerating linear 5s infinite;
  animation: PDFgenerating linear 5s infinite;
  stroke-dasharray: 28 !important;
  -moz-transform-origin: center;
  -ms-transform-origin: center;
  -o-transform-origin: center;
  -webkit-transform-origin: center;
  transform-origin: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myIcon" style = "width:100px"><svg viewBox="0 0 100 100" focusable="false"><g class="bg"><circle cx="50" cy="50" r="45.56" style="stroke-width:4.44;stroke-linecap:butt;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0"></circle></g><g class="fg" transform="translate(50,50) scale(0.5) translate(-50,-50)"><g transform="matrix(0.19920319,0,0,0.19920319,2.5095651e-4,-1.38e-6)"> <g> <path d="m 478.482,448.601 -101.6,-101.599 c 8.089,-15.262 12.339,-32.29 12.339,-49.717 0,-35.689 -18.182,-69.164 -47.804,-88.743 V 92.53 c 0,-2.652 -1.054,-5.196 -2.929,-7.071 L 255.959,2.929 C 254.083,1.054 251.54,0 248.888,0 H 24.371 c -5.522,0 -10,4.477 -10,10 v 427.735 c 0,5.523 4.478,10 10,10 h 307.046 c 5.522,0 10,-4.477 10,-10 v -37.722 l 92.825,92.825 c 5.908,5.908 13.764,9.162 22.119,9.162 8.356,0 16.212,-3.254 22.12,-9.162 12.197,-12.196 12.197,-32.041 0.001,-44.237 z M 307.276,82.53 H 258.889 V 34.143 l 24.193,24.193 24.194,24.194 z m 14.141,313.847 v 31.358 H 34.371 V 20 h 204.517 v 72.53 c 0,5.523 4.478,10 10,10 h 72.529 v 95.662 l 0.009,0.014 c -12.214,-4.741 -25.275,-7.215 -38.499,-7.215 -58.61,0 -106.294,47.683 -106.294,106.293 0,58.61 47.684,106.293 106.294,106.293 13.224,0 26.285,-2.474 38.499,-7.215 l -0.009,0.015 z m 7.531,-26.086 c -0.848,0.536 -1.706,1.057 -2.574,1.563 -13.131,7.67 -28.154,11.724 -43.446,11.724 -47.583,0 -86.294,-38.711 -86.294,-86.293 0,-47.582 38.711,-86.293 86.294,-86.293 15.291,0 30.315,4.054 43.447,11.724 26.428,15.435 42.846,44.008 42.846,74.569 0,16.35 -4.595,32.264 -13.289,46.022 -6.835,10.818 -16.166,20.148 -26.984,26.984 z m 135.391,108.405 c -2.131,2.131 -4.964,3.304 -7.978,3.304 -3.014,0 -5.847,-1.173 -7.977,-3.304 l -98.706,-98.706 -0.008,-0.001 c 5.856,-4.74 11.221,-10.104 15.961,-15.96 l 0.001,0.008 98.707,98.707 c 4.398,4.398 4.398,11.554 0,15.952 z"></path> <path d="m 246.838,238.403 c -20.641,12.674 -32.964,34.686 -32.964,58.882 0,5.523 4.478,10 10,10 5.522,0 10,-4.477 10,-10 0,-17.19 8.759,-32.83 23.429,-41.838 4.707,-2.89 6.179,-9.048 3.289,-13.754 -2.89,-4.707 -9.048,-6.18 -13.754,-3.29 z"></path> <path d="m 317.708,237.624 c -10.52,-6.145 -22.547,-9.392 -34.781,-9.392 -5.522,0 -10,4.477 -10,10 0,5.523 4.478,10 10,10 8.693,0 17.232,2.304 24.693,6.662 1.586,0.926 3.321,1.367 5.034,1.367 3.438,0 6.785,-1.775 8.645,-4.958 2.786,-4.77 1.178,-10.894 -3.591,-13.679 z"></path> </g> </g></g></svg></div>
<br>
<button id = "btn">animate</button>

This could be an alternative without css transform, but still doesn't work on IE/Edge.

So this doesn't answer the question? Why post it then. – Ralf de Kleine Jan 31 '18 at 08:26 — Ralf de Kleine, Jan 31 '18 at 08:26

CSS Animation not working in IE/Edge

2 Answers2

Linked