-
Notifications
You must be signed in to change notification settings - Fork 0
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.