IE/Edge에서 CSS 애니메이션이 작동하지 않습니다.

IE/Edge에서 어떻게 작동합니까? 나는 그것이 왜 이해가 안됩니다.IE/Edge에서 CSS 애니메이션이 작동하지 않습니다.

클래스에 요소를 추가하면 해당 경계선이 파선이되어 회전이 시작됩니다.

$("#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 \t : stroke-dasharray cubic-bezier(0.4, 0, 0.2, 1) .7s; 
 
    -o-transition \t \t : 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 \t \t \t : stroke-dasharray cubic-bezier(0.4, 0, 0.2, 1) .7s; 
 
    stroke-dasharray \t : 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 %를 사용했습니다.

회전 애니메이션
작동하지 않는 이유를 찾을 수 IE에서 것을 CSS를 통해 사용 된 경우 작동하지 않는 SVG에 변환 보인다

출처

2017-10-25 marco burrometo

이 코드와 함께 html을 추가 할 수 있습니까? – bubesh

안녕하세요 @bubesh, 스 니펫을 추가했습니다 :) –

더 나은 결과를 얻었습니다. D –

그것을 CSS transform on SVG Elements IE9+
을 설명하고 또한 IE 사이트에 그것이이 SO 링크 이것은 IE/에지에서 작동하지 않습니다 아직 CSS를하지 않고 다른 변환 될 수 있지만 수 https://connect.microsoft.com/IE/feedback/details/811744/ie11-bug-with-implementation-of-css-transforms-in-svg

출처

2017-10-25 10:36:27 bubesh

"성가신 있지만 용납 될 수 있습니다." –

첫 번째 링크에서 해결 방법을 적용하겠습니다. 많은 –

덕분에 SVG 대신 CSS로 회전하는 원을 만들고 그 안에 아이콘을 배치하고 애니메이션을 적용 할 수 있습니다. https://codepen.io/phliem/pen/vKQoBr처럼 작동해야합니다. – bubesh

-1

$("#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 \t : stroke-dasharray cubic-bezier(0.4, 0, 0.2, 1) .7s; 
 
    -o-transition \t \t : 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 \t \t \t : stroke-dasharray cubic-bezier(0.4, 0, 0.2, 1) .7s; 
 
    stroke-dasharray \t : 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>

버그로 기록.

출처

2017-10-25 12:42:15

그래서이 질문에 답하지 않습니까? 왜 그것을 게시하십시오. –

IE/Edge에서 CSS 애니메이션이 작동하지 않습니다.

답변

관련 문제