Skip to content

CSS animation delays

Steven Vachon edited this page May 7, 2014 · 18 revisions

Both SVG and CSS allow you to create repeating animations that begin after an initial delay.

<rect width="100" height="100">
    <animate attributeName="x" from="0" to="100" dur="1s" begin="3s" repeatCount="2" />
</rect>

produces:

<rect width="100" height="100" style="animation:_smil1 1s 3s 2" />

Synchronizing multiple instances can be an issue in CSS, however, as the delays won't always start at the same time.

By default, smil2css will recommend that you do not convert files that will result in using such delays. You can override this with the force option. Once outputted, you could try working around the issue with a negative delay trick, but do realize that this will change the start position of the animation.

Quick Navigation

Clone this wiki locally