SVG Opacity Image keeps popping up after fade

Question

                <animate id="op"
                attributeName="opacity"
                values="0;1;0" 
                dur="1s"
                begin="1s;op.end+3s"
                />

I have this code that's being used to fade an image off then back on with a delay of 3 seconds but when it fades off during the 3 second delay the image pops back up and is visible. How can I make it invisible during the delay?

Answer 1

add fill="freeze" if you want the animation state to persist once the animation ends.

Answer 2

<animate id="op"
                attributeName="opacity"
                values="1;0;0;1" 
                keyTimes="0;0.2;0.8;1"
                dur="5s"
                begin="1s"
                />

You can use keyTimes. One keyTime corresponds to one value and represents at which proportion of the duration this given value should be reached. So here it begins with opacity 1 at time 0*5s = 0s, then at time 0.2*5s = 1s it reaches opacity 0 (fade off), it keeps opacity 0 up to time 0.8*5s = 4s and returns to opacity 1 at time 1*5s = 5s (fade on).

Working example:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="-50 -50 100 100">
<circle r="50">
        <animate id="op"
                attributeName="opacity"
                values="1;0;0;1" 
                keyTimes="0;0.2;0.8;1"
                dur="5s"
                begin="1s"
                />
</circle>
</svg>