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: | | | | |
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:smil="http://www.w3.org/ns/SMIL"> <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>
SMIL compliant but doesn’t pass the W3C validator. Requires XHTML.