Syncbases

Syncbases are essentially event listeners created without the use of JavaScript. Due to their inherent nature, converting them to static CSS keyframes cannot support all of their features.

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;4s" />
</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.

begin list (looping, no initial delay)

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

Unaccepted Uses

begin list (looping with initial delay)

<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. While this actually does convert accurately, browsers have difficulty with playback. more info