A state between two classes

Question

I have two CSS classes (c1 and c2), and I'm switching between them with CSS3 transitions.

Now, I want a div to stay (not animate) in a state between c1 and c2, for example 60% c1 and 40% c2. (If I play a transition with 1second duration between c1 and c2, I want the state of frame that appears at 0.4s)

c1 and c2 has many properties (transforms, etc.), so it is not easy to calculate each property by required percents and set it to the div.

Is there any CSS/jQuery method for this purpose?

Answer 1

jQueryUI's switchClass, addClass functions do not support the step function argument which makes achieving this really difficult.

However, if you can specify the styles in the animate code itself, this can be done - Check this fiddle: http://jsfiddle.net/techfoobar/fAZqn/2/