Question

I’ve put together some key frame animations in CSS which animate a div from one side of the screen to the other, applying a slight rotation along the way. I’m finding the key frame approach restrictive because I want to be able to have many variations that go into one big sequence. The variations could as an example be not just left to right, right to left but also up to down and so on. To add more complexity to the problem, I need to be able to shuffle up this sequence and retain continuity between each animation.

The sequence itself should be able to run in any order and reset.

For example if I want to move the div in 100px phases:

left (100px), up (100px), left (100px) and then down(100px)

the next time I might want the sequence as follows (again 100px):

left, down, right, up

My thinking is that this would be better achieved by using JavaScript to write the animations on the fly perhaps using something like the CSS3 Matrix. So far I’ve figured out the easy stuff like left and right but I can’t figure out how to add in rotation. This seems like a really good starting point:

http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/

http://www.eleqtriq.com/2010/05/css-3d-matrix-transformations/

Also been taking a look at this:

http://tweenjs.com/

My thoughts are, a) am I over-complicating this by taking the CSS Matrix approach? Is there something simpler? and b) How can I achieve rotation and movement at the same time using the CSS Matrix or any other approach?

Any help appreciated!

Answer 1

If you want to do dynamic animations, then you should be using JavaScript to animate.

As far as how to combine translation with rotation, the answer is right there in the useragentman post (which incidentally is a very good introduction to css matrixes.)

Take the angle of rotation (in radians) that you want to achieve and create the following matrix:

Cos(angle), -Sin(angle), 0
Sin(angle), Cos(angle), 0
0,            0,        1

then create the following matrix for your (presumably 2D) movement in x and y.

0,0,X
0,0,Y
0,0,1

Then multiply them together (or take the dot product in matrix terminology). Here is a handy matrix multiplier for you, the details of how to create a dot product are also in the same post.

Note that these are transforms (not position changes) and transforms don’t affect affect page position.