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:

Let all properties loop

When smil2css is presented with this issue, it will automatically decide that because at least one property has one or more repetitions, all properties should therefore repeat indefinitely. The alternative would have been to loop nothing at all.

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>

This will loop the shape's <g> container instead while allowing its animation to play only once.

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.