CSS动画在IE/Edge中不起作用 [英] CSS Animation not working in IE/Edge

问题描述

这东西在IE/Edge中如何工作?我不明白为什么没有.

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>

我已经尝试在trasform起源中使用％，并在关键帧中使用0％和100％，就像在一些非常相似的问题中所发现的那样.

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

推荐答案

如果通过IE中的CSS使用SVG上的转换似乎无效，为什么旋转动画也不起作用
找到了此SO链接，对其进行了解释在SVG Elements IE9 +上进行CSS转换
并且在IE站点中也记录为错误

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

这篇关于CSS动画在IE/Edge中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！