RE: [css3-animations] Proposition : Animation Curve

You can accomplish this effect with transform-origin in CSS.
Ie if you want an object to rotate around a point, you can give it the following css style:

@-webkit-keyframes tst_KF_1 {
from {-webkit-transform: translate(275px, 58px) rotate(0deg);}
to {-webkit-transform: translate(275px, 58px) rotate(360deg);}
}
..tst_2
{
      -webkit-animation-duration: 2.5s;
      -webkit-animation-name: tst_KF_1;
      -webkit-animation-iteration-count: infinite;
      -webkit-transform-origin: 275px 150px;
      -webkit-animation-timing-function: linear;
}

If you don't like that it rotates with the path, you can give it another animation to counteract the rotation:
@-webkit-keyframes tst_KF_2 {
from {
      -webkit-transform: rotate(360deg);
}
to {
      -webkit-transform: rotate(0deg);
}
From: www-style-request@w3.org [mailto:www-style-request@w3.org] On Behalf Of Timotée Neullas
Sent: Wednesday, November 24, 2010 4:33 AM
To: www-style@w3.org
Subject: [css3-animations] Proposition : Animation Curve

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 trajectory.
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 developper.
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 :
http://timote.neullas.free.fr/css/
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