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

This will play frames: 0, 1, 2 ... 0, 1, 2, etc.