SMIL Timing

Timing indicates when to start and when to end.

Timelines and Timing

Most SMIL elements use timing attributes to define the timeline of presentation.

Timing attributes define the start time of an element and its duration.

The following table lists possible time formats:

Format Example
hh:mm:ss.f
  • 1:50:00 (1 hour 50 minutes)
  • 10:50 (10 minutes 50 seconds)
  • 10.5 (10.5 seconds)

number

[h|min|s|ms]
  • 3.5h (3.5 hours)
  • 3.5min (3.5 minutes)
  • 3.5sec (3.5 seconds)
  • 35ms (35 milliseconds)

wallclock

(YYY-MM-DDThh:mm:ss+zone)

wallclock(2003-08-01T12:10:30+1.00)

(After 10:30, 12:00, August 1, 2003, Coordinated Universal Time + 1 hour)

The value 'indefinite' can be used to define an endless loop.

Duration

The 'duration' (duration, dur="5s") attribute defines the visibility duration of the element:

<html>
<head>
  <style>.t {behavior: url(#default#time2)}</style>
</head>
<body>
<img class="t" src="image1.jpg" dur="5s" />
</body>
</html>

Try It Yourself (TIY)

When does it start?

The 'begin' (begin="2s") attribute defines when the element becomes visible (starts playing):

<html>
<head>
  <style>.t {behavior: url(#default#time2)}</style>
</head>
<body>
<img class="t" src="image1.jpg" begin="2s" />
</body>
</html>

Try It Yourself (TIY)