SVG: problems with animations

Design & UX
1

I would like a polygon in a SVG file to translate top down and fade in and then stops. I encountered few problems though. If is set the “begin” attribute, a weird behavior occurs. For the translation part: . For the opacity part: the “to” attribute doesn’t work when I set it to a floated value, such as “0.1”.

<polygon fill="rgb(255,255,255)" points="15,22 79,22 84,32 65,32 25,32">
    <animateTransform attributeType="xml"
                        attributeName="transform"
                        type="translate"
                        from="0,-20"
                        to="0,0"
                        begin="2s"
                        dur=".5s" />
                        <animate
                        attributeType="CSS"
                        attributeName="opacity"
                        from="0"
                        to="0.1"
                        begin="2s"
                        dur="0.5s" />
</polygon>

Can you shed some light? Thank you.