1

I've been trying to animate this heart SVG and this codepen seems to work fine in chrome, firefox, and safari on Mac but in IE 11+ I can't seem to find a resolution anywhere.

All I need it to do is to fade in, grow, and fade out but IE doesn't seem to scale up in the keyframe no matter what I try.

Thanks in advance!

<svg version="1.1" class="svg-pulse" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 60 42.7" enable-background="new 0 0 60 42.7" xml:space="preserve">


.svg-pulse {   width: 100vw;   height: 100vh; }

@-webkit-keyframes svg_pulse {   0% {
    radius: 10;
    transform-origin: center center;
    transform: scale(.1);
    opacity: 0;   }   25% {
    opacity: .1;   }   50% {
    opacity: .1;   }   100% {
    transform-origin: center center;
    transform: scale(.8);
    opacity: 0;   } }

@keyframes svg_pulse {   0% { /*     radius: 5; */
    -ms-transform-origin: center center;
    transform-origin: center center;
    -ms-transform: scale(.1);
    transform: scale(.1);
    opacity: 0;   }   25% {
    opacity: .1;   }   50% {
    opacity: .1;   }   100% {
    -ms-transform-origin: center center;
    transform-origin: center center;
    -ms-transform: scale(.8);
    transform: scale(.8);
    opacity: 0;   } }

.svg-pulse .pulse {   animation: svg_pulse 6s ease;   animation-iteration-count: infinite;   fill: hotpink; }

.svg-pulse .two {   opacity: 0;   animation-delay: 1.5s; }

.svg-pulse .three {   opacity: 0;   animation-delay: 3s; }

.svg-pulse .four {   opacity: 0;   animation-delay: 4.5s; }
Kishor
  • 2,659
  • 4
  • 16
  • 34
Nicole M
  • 11
  • 2
  • Possible duplicate of [SVG animation not Working on IE 11](http://stackoverflow.com/questions/33812303/svg-animation-not-working-on-ie-11) – claudios Mar 28 '16 at 01:14

1 Answers1

0

Msdn_svg Even according to Microsoft simple SVG animation does not work on Internet Explorer, without the addition of JavaScript.

[MSDN_SVG_animationGuide][1]

This is in agreement with my own experience.

Arif Burhan
  • 507
  • 4
  • 12
  • Citing MSDN : "Internet Explorer does not support declarative animation. Undeniably, there can be more work associated with script-based animation" – Arif Burhan Mar 28 '16 at 01:49