Syncbases

Syncbases are asynchronous time values that essentially create event listeners without the use of JavaScript. As a result of their core functionality, converting them to synchronous timelines that CSS can handle only covers a few common uses.

Accepted Uses

begin (no loop)

<rect width="100" height="100" visibility="hidden">
	<animate id="frame1" attributeName="visibility" values="visible" dur="1s" begin="0s" />
</rect>
<circle r="50" cx="50" cy="50" visibility="hidden">
	<animate id="frame2" attributeName="visibility" values="visible" dur="1s" begin="frame1.end" />
</circle>

The above will play frames: 1, 2.

begin list (no loop)

<rect width="100" height="100" visibility="hidden">
	<animate id="frame1" attributeName="visibility" values="visible" dur="1s" begin="0s;2s" />
</rect>
<circle r="50" cx="50" cy="50" visibility="hidden">
	<animate id="frame2" attributeName="visibility" values="visible" dur="1s" begin="frame1.end" />
</circle>

The above will play frames: 1, 2 ... 1, 2.

<rect width="100" height="100" visibility="hidden">
	<animate id="frame1" attributeName="visibility" values="visible" dur="1s" begin="0s;frame2.end" />
</rect>
<circle r="50" cx="50" cy="50" visibility="hidden">
	<animate id="frame2" attributeName="visibility" values="visible" dur="1s" begin="frame1.end" />
</circle>

The above will play frames: 1, 2 ... 1, 2 ... 1, 2, etc. indefinitely.

<rect width="100" height="100" visibility="hidden">
	<animate id="frame1" attributeName="visibility" values="visible" dur="1s" begin="2s;frame2.end" />
</rect>
<circle r="50" cx="50" cy="50" visibility="hidden">
	<animate id="frame2" attributeName="visibility" values="visible" dur="1s" begin="frame1.end" />
</circle>

After an initial two second delay, the above will play frames: 1, 2 ... 1, 2 ... 1, 2, etc. indefinitely.

Unaccepted Uses

Delayed Loop

<rect width="100" height="100" visibility="hidden">
	<animate id="frame1" attributeName="visibility" values="visible" dur="1s" begin="2s;frame2.end" />
</rect>
<circle r="50" cx="50" cy="50" visibility="hidden">
	<animate id="frame2" attributeName="visibility" values="visible" dur="1s" begin="frame1.end" />
</circle>

After an initial 2s delay, the above will play frames: 1, 2 ... 1, 2 ... 1, 2, etc. indefinitely. This cannot be converted because that initial 2s delay would have to be included at the beginning of frame2's CSS animation. As a result, the delay would be repeated with each iteration, which would not match results with SMIL.