Four bars grow to the sides of the canvas while changing color during a 3-second period.
The black square in the middle changes opacity from 1 to 0 (full - none) in the same period.
The 2 bars moving to the left and top edges require an extra animate command for the x and y coordinates.
Here is the code to generate the horizontal line, beginning as green and changing to yellow:
<rect id="lineG" x="170" y="250" height="20" width="80" fill="green">
<animate attributeName="fill" attributeType="css" from="green" to="yellow" begin="0s" dur="3s" fill="freeze"/>
<animate attributeName="x" attributeType="xml" from="170" to="10" begin="0s" dur="3s" fill="freeze"/>
<animate attributeName="width" attributeType="xml" from="80" to="240" begin="0s" dur="3s" fill="freeze"/>
</rect>