Independent property looping per element

One powerful feature of SVG/SMIL is the ability to not only independently animate the properties of a single element, but also control the repetition of each of those properties.

For example:

<rect width="100" height="100">
	<animatetransform attributeName="transform" type="rotate" from="0" to="90" dur="1s" repeatCount="indefinite" />
	<animate attributeName="x" from="0" to="100" dur="1s" />
</rect>

This will rotate forever, but will only move from left to right once. However, trying to convert this with smil2css will not work as expected because CSS does not have this level of control. At this point, there are two options:

1. Restructure the SVG

To achieve the same effect, you'd have to move things around to look something like the following example:

<g>
	<animatetransform attributeName="transform" type="rotate" from="0" to="90" dur="1s" repeatCount="indefinite" />
	<rect width="100" height="100">
		<animate attributeName="x" from="0" to="100" dur="1s" />
	</rect>
</g>

Once converted, this will instead forever rotate the shape's <g> container while allowing the left-to-right animation to play only once.

2. Use something else

As funny as it sounds, this is really the only other option. smil2css will result in an error if the repeatCount values of sibling animation elements do not match.

Why not auto-restructure in smil2css?

It could, of course, but it'd be very assuming which could cause issues if the SVG document were to contain its own CSS for any of those elements.