From http://www.w3schools.com (Copyright Refsnes Data)

SMIL Sequence

Previous Next

<seq> - the most common SMIL element - defines a sequence.


The Sequence Element <seq>

The <seq> element defines a sequence. The children elements of the <seq> element are displayed in a sequence, one after each other.

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

The <seq> element can have a number of attributes. The most common attributes are:

Attribute Value Description
begin time Sets the delay before the element is displayed
dur time Sets the duration for the display
repeatCount number Sets the number of repetitions for the display

For a full list of SMIL elements and attributes: W3Schools SMIL Reference.  


Example: Displaying a Sequence of Images

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

Click here to try it yourself.


Example: Displaying a Sequence of Texts

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

Click here to try it yourself.


Previous Next

From http://www.w3schools.com (Copyright Refsnes Data)