This is a simple demo of the proposed :-media-time filter in CSS, currently implemented as a hitchjs hitch... Watch the video (or move progress through) and the CSS-bound commentary will appear at relevant bits...
Ok everybody - ready for this?
Presenting the
:-media-time() pseudo-class...
A pseudo-class for syncing the application of rules with the timeline of media like audio and video (and maybe in the future animation)...
Don't you think a hat or a hood would have been helpful?
Check out the video overlay...
She Looks COLD!
Awesome!
This is an initial hitch (like a shim) for an idea proposed
originally by Jullien Dora and later improved on www-style.
It has already been added for consideration
CSS Selectors Level 5 Time Pseudo Classes
.
Pause, play, mess with the timeline a bit - it's fun!
OMG: Watch this!!
This bird thing scares me.
The pseudo class allows you to make CSS rules evaluate their truthfulness based on the .currentTime of a media element.
This means you can use the full power of HTML and CSS to add meaning and interactivity.
Ok... You get the idea, thanks for watching :)

For more information on the movie check out sintel.org.
For more about extending CSS like this check out hitchjs.com
Want to help make this demo better? Fork it on github and send us a pull request.
Julien will be expanding this in a blog about meta fragments... watch for it!

The code looks like this:
Let us know what you think...