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

[css3-animations] Proposition : Animation Curve

From: Timotée Neullas <tneullas@gmail.com>
Date: Wed, 24 Nov 2010 13:33:26 +0100
Message-ID: <AANLkTi=LBg9Dj5Yhui-dAGuL+Yb+PaCFoq6Ch-HfcFtL@mail.gmail.com>
To: www-style@w3.org
Hello everyone,

I noticed a thing I often want to do with animations and can't, also I am
not sure if it is the right mailing list to post and I really apologise if
it's not..
Animation are often use to move an element like an image for example.
I often want to make an object turn like if it was around a circle or make a
nice move with a curve.

So here it is, I would like to move an object which will follow a curved
It is possible to solve this problem using some Javascript with timer + DOM
+ some cosinus knowledge, but it is really not user friendly for a
Also i think it would be cool to have this feature in CSS.

I think a good way to go over this problem is using two tangent to define
the curve. The first tangent is for the starting position, the second is for
the end.
I made some pictures for you which you can found on my website :
The idea is to define the curve with bézier path like it is possible to do
in vectorial drawing software like InkScape for example.

I propose to call it animation-curve which could work like that :
animation-curve: angle size,angle size.
For example :
animation-curve: 90(deg) 100px,180(deg) 10em;

Also this method allow object to turn in round if we keep the position of
the object at start and at the end of animation.
It could work with an animation curve like that :
animation-curve: -45(deg) 30px, 45(deg) 30px;

The possibilities of animation using what I propose could be augmented
because it's easy to make any curve, any round or ovale etc.
I probably didn't see every limitation of this, do you think it is possible
to do ? would you use it ? Does something like this already exist ?

Best regards.

Neullas Timotée
Received on Wednesday, 24 November 2010 12:33:59 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:41 UTC