SVG Animate in reverse once complete

Question

I've created a basic svg animation which loops every 750ms, however once it's finished a single animation loop it jumps back to the beginning giving it an ugly hard cut look.

<animate attributeName="stop-opacity" from="0.99" to="0.20" dur="750ms" repeatCount="indefinite" />

Is it possible that once the opacity goes from 0.99 down to 0.20 it will work its way back up to 0.99 instead of instantly jumping back to the start variable?

Example fiddle

Answer 1

You can specify multiple values by using the values attribute on animate. Using this, you could specify to go back to the original opacity or even add more opacity values:

<animate attributeName="stop-opacity" values="0.99;0.20;0.99" dur="750ms" repeatCount="indefinite" />

Answer 2

Here is a working example. There is no out of the box way to have an animation go back and forth using SMIL, but you can use a workaround that starts a secondary animation after the first that is a backwards animation. This will loop and give the effect of your SVG fading in and out.

<animate id="anim1"attributeName="stop-opacity" from="0.99" to="0.20" dur="750ms" begin="0s; anim2.end" fill="freeze"/>
<animate id="anim2"attributeName="stop-opacity" from="0.20" to="0.99" dur="750ms" begin="anim1.end" fill="freeze"/>

Those are the two lines that I changed. Notice I have the second animation start once the first ends and the first one start after the second one ends (looping between the two).