A declarative approach for HTML Timing using SMIL Timesheets

A simple use case is to define an HTML rotating banner. Here’s an example, blatantly stolen from PortableLinuxApps.org but described with pure SMIL attributes:

CSS transition: | | | | |

HTML Markup

<!DOCTYPE html>
    <script type="text/javascript" src="timesheets.js"></script>
    <div id="banner" data-timecontainer="seq" data-repeatcount="indefinite">
      <img data-dur="3s" src="images/dosbox.png"       alt="[…]">
      <img data-dur="3s" src="images/gnote.png"        alt="[…]">
      <img data-dur="3s" src="images/gpodder.png"      alt="[…]">
      <img data-dur="3s" src="images/transmission.png" alt="[…]">

Not SMIL compliant but passes the W3C validator. Does not require XHTML.

Warning: to be HTML5-compliant, data-* attributes have to be lowercase.