timesheets.js

A declarative approach for HTML Timing using SMIL Timesheets

recommended markup (HTML5-valid): data-* attributes | external timesheet
supported variants: inline SMIL | smil-* attributes | smil:* attributes | internal timesheet

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>
<html>
  <head>
    […] 
    <script type="text/javascript" src="timesheets.js"></script>
  </head>
  <body>
    […]
    <div id="banner" smil-timecontainer="seq" smil-repeatcount="indefinite">
      <img smil-dur="3s" src="images/dosbox.png"       alt="[…]">
      <img smil-dur="3s" src="images/gnote.png"        alt="[…]">
      <img smil-dur="3s" src="images/gpodder.png"      alt="[…]">
      <img smil-dur="3s" src="images/transmission.png" alt="[…]">
    </div>
    […]
  </body>
</html>

Neither HTML nor SMIL compliant. Does not require XHTML.

This smil- prefix (followed by lowercase attributes) is mainly a proposal for a clean integration within HTML5. That’s the way ARIA tags, which used to follow an XHTML syntax, have been integrated into HTML5.