[css3-animations] steps() timing function sometimes unintuitive

I recently attended a great talk by Rachel Nabors about using CSS
Animations to do "music videos", and while there heard an interesting
complaint about the steps() function that I think we should address in
the next level.

The issue is that steps() looks like it "eats" either the start or end
keyframe.  For example, say you have a background-position-x animation
going from 0px to 60px, with a timing function of steps(3) over 6
seconds.  The behavior is:

0s 0px
 | 0px
 | 0px
 v 0px
2s 20px
 | 20px
 | 20px
 v 20px
4s 40px
 | 40px
 | 40px
 | 40px
 v 40px
6s 60px

The animation officially hits 60px, but only at the literal last
instant, and if you're not filling forward, you'll never see it.  So,
it *looks* like the background was just animated from 0px to 40px.
You get a similar problem with the starting value disappearing if you
use step-start.  The only way to work around this is to "overshoot"
your target - instead of doing the above, make it a 4-step animation
from 0px to 80px, so that it spends 1.5s each with 0px, 20px, 40px,
and 60px.

Our current behavior makes sense, of course - it's a simple
consequence of splitting the animation curve into 3 segments and
making each of those segments a step - but it's unintuitive for
someone who just wants to see the animation start at one value, end at
another, and make a few discrete steps in between.

I propose another steps value: step-mid. It splits the animation curve
into n segments, makes the first n-1 do step-end behavior, and leaves
the last to just run normally.  The above example could instead be
written as "steps(4, step-mid)" and have this behavior:

0s 0px
 | 0px
 | 0px
 v 0px
1.5s 20px
 | 20px
 | 20px
 v 20px
3s 40px
 | 40px
 | 40px
 | 40px
 v 40px
4.5s 60px
 | 60px
 | 60px
 | 60px
 v 60px
6s 60px

Like I said, I don't think this is a major issue to address at this
level, but would like it considered for Animations 4.  Thoughts?

~TJ

Received on Wednesday, 19 December 2012 18:29:57 UTC