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

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.
>
>