W3C home > Mailing lists > Public > www-style@w3.org > June 2013

[css3-transitions][css3-animations] Proposal for animation-timing keywords for half-parabola curves - facilitating correct rise/fall/bounce type animations

From: Dean Trower <dean@omnivisiontechnology.com>
Date: Thu, 20 Jun 2013 01:22:14 +1000
Message-ID: <6DCDAB3E1CDF46FAA782E045ED8E86B2@ZendoinsPC>
To: <www-style@w3.org>
The CSS transitions/animations module currently defines for the 
animation-timing and transition-timing properties, the keywords "ease", 
"ease-in", "ease-out" and "ease-in-out" as shortcuts for cubic-bezier(...) 
with certain specific arguments.

I'D LIKE TO PROPOSE 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)

Having keyword shortcuts for these curves (perhaps "rise" and "fall"?) 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).

Thanks for your consideration,

  Dean Trower
Received on Wednesday, 19 June 2013 15:22:31 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:31 UTC