W3C home > Mailing lists > Public > www-style@w3.org > August 2012

Re: [css3-animations] time sources, videos and storyboards

From: Alan Gresley <alan@css-class.com>
Date: Thu, 02 Aug 2012 00:13:13 +1000
Message-ID: <50193979.4070302@css-class.com>
To: Fran├žois REMY <fremycompany_pub@yahoo.fr>
CC: Sebastian Zartner <sebastianzartner@gmail.com>, Julien Dorra <juliendorra@juliendorra.com>, www-style@w3.org
On 1/08/2012 1:51 AM, Fran├žois REMY wrote:

> Later in time, I could also envision things like storyboards, to make things a bit easier:
>
>    CSS:
>    @storyboard my-video-overlays {
>
>        time-source: url(#my-video);
>
>        /* initial state */
>        from {
>            #first-overlay { opacity: 0; display: none; }
>            #second-overlay { opacity: 0; display: none; }
>        }
>
>        /* storyboard for first overlay, overrides initial state */
>        0s {
>            #first-overlay { opacity: 0; display: block; }
>        }
>        1s {
>            #first-overlay { opacity: 1 }
>        }
>        14s {
>            #first-overlay { opacity: 1 }
>        }
>        15s {
>            #first-overlay { opacity: 0; display: none; }
>        }
>
>        /* storyboard for the second overlay */
>        to - 15s { ... }
>        to - 14s { ... }
>        to - 1s { ... }
>        to { ... }
>
>        /* final state */
>        to {
>            #first-overlay { opacity: 0; display: none; }
>            #second-overlay { opacity: 0; display: none; }
>        }
>
>    }
> If you add this to generated boxes (slots), you could entirely describe video subtitles and overlays in unobstruive CSS that could be referenced in the <track /> element of the VIDEO tag (so that users could enable/disable overlays using their usual UI).

I supported this type of timing function last year in May [1] and June 
[2]. It came from Andrew Fedoniouk's concept of a storyboard (group 
transitions) [3].


1. http://lists.w3.org/Archives/Public/www-style/2011May/0554.html
2. http://lists.w3.org/Archives/Public/www-style/2011Jun/0084.html
3. http://lists.w3.org/Archives/Public/www-style/2011Apr/0548.html

-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/
Received on Wednesday, 1 August 2012 14:13:49 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:58 GMT