This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.

Bug 22483 - Request for keywords representing parabolic cubic-bezier timing functions
Summary: Request for keywords representing parabolic cubic-bezier timing functions
Status: NEW
Alias: None
Product: FXTF
Classification: Unclassified
Component: Web Animations (show other bugs)
Version: unspecified
Hardware: All All
: P2 enhancement
Target Milestone: ---
Assignee: FXTF Web Animation bugs
QA Contact:
URL:
Whiteboard:
Keywords:
Depends on:
Blocks:
 
Reported: 2013-06-26 17:53 UTC by Dean Trower
Modified: 2013-06-26 17:53 UTC (History)
0 users

See Also:


Attachments

Description Dean Trower 2013-06-26 17:53:26 UTC
At the moment, the Web Animations draft defines only the keywords "linear", "ease", "ease-in", "ease-out" and "ease-in-out" as shortcuts to cubic-bezier(...) timing functions of certain shapes.

I'd like to suggest that a couple more such keywords be added to this list - specifically, for *parabolic* timing functions:  Representing the path objects take either rising, or falling, under gravity.

The reason is that making objects appear to rise, fall, or bounce under gravity is I'd expect a fairly common use-case for CSS animation --- but using any of the ease-* curves to do it will result in wrong-looking (unphysical) behaviour:  Such animations require parabolic timing functions to look correct.

Rising and falling half-parabolas (somewhat similar in shape to ease-out and ease-in respectively) are also representable using cubic bezier curves, specifically (assuming my math is correct):

  rise:    cubic-bezier(0.33333, 0.66667, 0.66667, 1)
  fall:    cubic-bezier(0.33333, 0, 0.66667, 0.33333)

(Note that exact values are really 1/3 for 0.33333 and 2/3 for 0.66667 respectively)

Having keyword shortcuts for these curves (perhaps "parabolic-rise"/"parabolic-fall", or perhaps "accel"/"decel"?) will facilitate the easy creation of physically-correct rise/fall/bounce animations, and will also make it clear at a glance, from looking at the CSS, just what such animations are supposed to do.  (Which certainly isn't the case if you use cubic-bezier(...) with numerical arguments instead).