SMIL Sequence

<seq> - Most Common SMIL Element - Defines a Sequence.

Sequence Element <seq>

The <seq> element defines a sequence. The child elements of the <seq> element are displayed in sequence.

You can use the <seq> element to define a list of images to be displayed, a list of paragraphs, a list of videos, or any other elements.

The <seq> element has many attributes, the most commonly used attributes are:

Attribute Value Description
begin time The delay before the element is displayed.
dur time Set the duration to display.
repeatCount number Set the number of repetitions to display.

For a complete list of SMIL elements and attributes, please visit CodeW3C.com SMIL Reference Manual.

Example: Display Image Sequence

<html xmlns:t="urn:schemas-microsoft-com:time">
<head>
  <?import namespace="t" implementation="#default#time2">
  <style>.t {behavior: url(#default#time2)}</style>
</head>
<body>
<t:seq repeatCount="indefinite">
  <img class="t" src="image1.jpg" dur="1s" />
  <img class="t" src="image2.jpg" dur="1s" />
</t:seq>
</body>
</html>

Try It Yourself (TIY)

Example: Display Text Sequence

<html xmlns:t="urn:schemas-microsoft-com:time">
<head>
  <?import namespace="t" implementation="#default#time2">
  <style>.t {behavior: url(#default#time2)}</style>
</head>
<body>
<t:seq repeatCount="indefinite">
  <h2 class="t" dur="1s">
  I will display for one second</h2>
  <h2 class="t" dur="2s">
  I will display for two seconds</h2>
  <h2 class="t" dur="3s">
  I will display for three seconds</h2>
</t:seq>
</body>
</html>

Try It Yourself (TIY)