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>