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

<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.

<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