SVG animation opacity on loop

Question

I would like to make an svg path's opacity to go from 0 to 100 back to 0 and to 100 on a continuous loop.

So far i can get it to animate from 0 to 100 but not back again,

Any ideas?

Thanks

Answer 1

You have two separate animations - one for opacity increasing and one for it decreasing. Each begins when the other ends, but the first one also begins at 0s. Here's an example for a rect:

<rect x="10" y="10" width="20" height="20">
    <animate id="animation1"
             attributeName="opacity"
             from="0" to="1" dur="1s"
             begin="0s;animation2.end" />
    <animate id="animation2"
             attributeName="opacity"
             from="1" to="0" dur="1s" 
             begin="animation1.end" />
</rect>

Answer 2

You can animate any number of values using the values attribute, like this:

<rect x="10" y="10" width="20" height="20">
    <animate attributeName="opacity"
             values="0;1;0" dur="1s"
             repeatCount="indefinite"/>
</rect>

That will animate from opacity 0 to opacity 1 (100%), and then back to 0 again, over the course of 1 second.