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

Hi Julien,

I should point out that many of these use cases are being considered in 
the Web Animations specification.[1] In particular, putting animations 
on a timeline that can be seeked is covered there.

The section on synchronising animations with video has yet to be written 
up but some notes are available.[2] In short, we are looking at re-using 
the HTML5 media group facility by exposing a media-group CSS property.

Thanks,

Brian

[1] https://dvcs.w3.org/hg/FXTF/raw-file/tip/web-anim/index.html
[2] https://etherpad.mozilla.org/lIwpKlVNd2, section 4

(2012/08/01 7:42), Julien Dorra wrote:
> François, nice example. It would really bring a new aspect to animations
> in CSS. I would use it myself :-)
>
> If I skip right in the middle of an animation, clicking on the timeline,
> the browser would have - as you noted - to render the animation(s) state
> at that point.
>
> Is there someone that can tell us how complicated in term of
> implementation that would be?
> (btw, is display animable at the moment?)
>
> Very stimulating discussion, here. There *is* a need for synchronization
> with media elements, and having different ways to do might be a good
> thing. Popcorn and Instapoppin are covering the JS side (using JSON or
> data- attribute), but having the sync information in a standardized
>   format would be great for the longterm.
>
>     comprehensive example of what it could look like:
>
>         *HTML:*
>         <div class=”my-video-overlay” style=”animation-delay: 0s;
>         animation-duration: 15s;”>...</div>
>         <div class=”my-video-overlay” style=”animation-delay: 543s;
>         animation-duration: 15s;”>...</div>
>         <video id=”my-video”>...</video>
>
>         *CSS:*
>         .my-video-overlay {
>              display: none;    animation-name: show;
>         animation-time-source: url(#my-video);
>         ... position ...
>         }
>
>         @keyframes show {
>              from { opacity: 0; display: block; }
>              10 % { opacity: 1; }
>              90 % { opacity: 1; }
>         to      { opacity: 0; display: none; }
>         }
>
>     During the 15 first seconds of the video, the first overlay would be
>     displayed and would be hidden after that. During the 15 last
>     seconds, the second overlay would. If the user rewinds back in time
>     or skip to another location of the video, the time would rewind at
>     the same pace as the video, keeping them always in sync.
>      From an implementation perspective, the only difference is that the
>     time used in the easing functions is not the system time but the
>     time defined by a video element. Also, it’s possible to go back in
>     time so that may have an effect on implementations.
>
>

Received on Tuesday, 31 July 2012 23:09:43 UTC