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

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

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Wed, 28 Nov 2012 21:12:18 -0800
Message-ID: <CAAWBYDA3yVgBk62Z0avWO0Wz4xSucj8Cv1XBv9Aa9tFFE4+wuw@mail.gmail.com>
To: Rik Cabanier <cabanier@gmail.com>
Cc: www-style list <www-style@w3.org>
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.

For example, the first would need:

@keyframes carousel-1 {
  0% { transform: translateX(0); }
  83.33% { transform: translateX(1000px); }
  83.34% { transform: translateX(-200px); }
  100% { transform: translateX(0); }
}

while the second image would need:

@keyframes carousel-2 {
  0% { transform: translateX(0); }
  67.66% { transform: translateX(800px); }
  67.67% { transform: translateX(-400px); }
  100% { transform: translateX(0); }
}

etc.

(I *think* the math is right on this.)

~TJ
Received on Thursday, 29 November 2012 05:13:05 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:21:03 GMT