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

Can we see the code you have so far? (Edit it into your post, if you would). — halfer, Aug 06 '12 at 12:41

Erik Dahlström · Answer 1 · 2014-06-09T11:48:43.973

51

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.

edited Jun 09 '14 at 11:48

answered Aug 08 '12 at 14:34

Erik Dahlström

59,452
12
120
139

This doesn't seem to repeat.. probably need `repeatCount="indefinite"` – Steven Lu Jun 07 '14 at 09:14

score 29 · Accepted Answer · answered Aug 06 '12 at 12:55

29

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>

answered Aug 06 '12 at 12:55

Peter Collingridge

10,849
3
44
61

1

deprecated elements :( – Doug Chamberlain Sep 09 '15 at 13:23
@DougChamberlain deprecated elements? Working fine for me. – Cyborg May 10 '17 at 14:23

SVG animation opacity on loop

2 Answers2

Linked