Possible to animate two properties of an SVG at once with a CSS animation?

Question

Not sure if I am doing this wrong? Is it possible to animate two properties on a path in an SVG at once? This works as I would expect in Firefox but not on Safari or Chrome.

Example SVG:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg"  version="1.1">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="holder">
            <path id="ShapeRight" d="M16,20 L21,16.5004951 C21,16.5004951 19.5760225,15.5035698 18.8640337,15.0051072 C17.9093558,14.336738 16,13 16,13 L16,20 L16,20 Z" opacity="0.55" fill="#999"></path>
        </g>
    </g>
</svg>

Relevant Sass/CSS (obviously prefixes needed in some instances)

#holder {
  #ShapeRight {
    opacity: 1;
    transform: scale(1);
    animation: pulseArrow 2s forwards ease-in-out infinite;
    transform-origin: 50% 50%;
    display: inline-block;
  }
}

@keyframes pulseArrow {
  0% {
    transform: scale(1) translateX(0);
    opacity: 0;
  }
  50% {
    transform: scale(2) translateX(0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 0;
  }
}

Here is a reduction on Codepen:

http://cdpn.io/hLFwn

You can see that only the last part of the animation is applied (the opacity). Should both work or is this a limitation to animating SVG with CSS?

Fernker · Answer 1 · 2013-11-14T18:21:03.730

So this was strange. I was able to replicate the problem on Chrome but I don't know why it's not applying both properties of animation.

A simple work around is that #ShapeRight has an animation that only does the scaling up and down. #holder then has its own animation that changes the opacity (since opacity affects children). In my test this caused the arrow to grow and shrink and fade in and out.

I know you were trying to get it to work with one animation but for some reason it isn't. I tried several ideas but I couldn't get that one shape to do the transform scale and change opacity in an animation. So I would keep digging but in the mean time the solution I found could be a temporary fix for you.

Here it is: http://codepen.io/Fernker/pen/BjzFt

Thanks Fernker, yes, I did think about that kind of approach. I'm keen to know if what I am attempting to do should not be possible (e.g. I am doing it wrong) or should be possible and just isn't working in Chrome and Safari (e.g. they are doing it wrong). At this point I'm inclined to think the latter as it works perfectly in Firefox. — Ben Frain, Nov 15 '13 at 09:12

score 0 · Accepted Answer · answered Nov 19 '13 at 10:23

Well, it turns out this is definitily a browser bug, I opened a ticket on Chromium and WebKit and Chromium have confirmed it: https://code.google.com/p/chromium/issues/detail?id=319407

Thankfully, there is also a simple workaround that they have suggested and that is to add fill in the animation property. For example:

@keyframes pulseArrow {
  0% {
    transform: scale(1) translateX(0);
    opacity: 0;
    fill: #fff; /* without this it won't work in Chrome/Safari */
  }
  50% {
    transform: scale(2) translateX(0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 0;
  }
}

Possible to animate two properties of an SVG at once with a CSS animation?

2 Answers2

Linked