Re: Request for Comments: Proposal for Touch-Based Animation Scrubbing

On Thu, Nov 29, 2012 at 4:07 PM, Tab Atkins Jr. <jackalmage@gmail.com>wrote:

> On Wed, Nov 28, 2012 at 9:12 PM, Tab Atkins Jr. <jackalmage@gmail.com>
> wrote:
> > On Wed, Nov 28, 2012 at 8:23 PM, Rik Cabanier <cabanier@gmail.com>
> wrote:
> >> Can you explain how your image carousel works?
> >> Specifically, how are the animations on the images triggered and
> >> synchronized by the timeline?
> >
> > I'd been thinking something was "off" when I put that example
> > together, and I was right - it's completely wrong, actually.
> >
> > To do that example correctly, you need a separate @keyframes rule for
> > each element, which properly moves it to the end, then flips to the
> > beginning, and finally ends back at its starting location.  These will
> > vary for every one, because they're all different distances from the
> > end.
>
> Never mind, I found a better way to do it.  It still requires work
> per-item, but only in the form of individual 'animation-delay'
> properties.  You only need a single @keyframes now.  It's updated in
> the doc.
>
> I also reworked the syntax a little bit.


Cool. That looks more elegant.

I really like the concept of the timeline since it provides synchronization
which is lacking from the current spec and should be incorporated into the
CSS animations.

Rik