[css3-transitions] starting and reversing animations

Document at http://www.w3.org/TR/css3-transitions defines condition
that triggers animation to start "when the value of an animatable
property changes".

I suspect that such definition of triggering condition has design flaw
that is not allowing to implement reversing of animations properly.

Consider typical "folding element" case:

div
{
   width:200px;
   height:16px;
   transition: width 1s linear,
               height 1s linear 1s;
}

div:hover
{
   width:300px;
   height:100px;
}


So when the div gets :hover state it will expand its width in
1st second and after that it will do expansion of its height in 2nd second.

It is highly desirable that when element will loose the :hover state
to see the animation going in opposite direction - collapsing of height
first and collapsing of width next.

It appears as css3-transitions document in its current state does not 
support this kind of scenario.

http://www.w3.org/TR/css3-transitions/#reversing describes
reversing of not-completed transition but there is no notion of
"backward" transition.

Possible solution to the problem is to change condition that
triggers the transition:

Let's imagine that change of the *transition* attribute itself triggers 
the animation. In this case we can write our styles this way:

div
{
   width:200px;
   height:16px;
}

div:hover
{
   width:300px;
   height:100px;
   transition: width 1s linear,
               height 1s linear 1s;
}
(transition moved to div:hover)

In this case at the moment when :hover changes we have
two "style bags": one that have @transition defined and another one
that has no @transition.

This will give us simple rule: if next style has @transition then
animation goes forward and it goes backward when previous style has 
@transition.

Such change also works for rolling back of not-finished animation.

In fact I've already implemented transitions this way and did not find
any logical problems with this.

Any other ideas?

-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Friday, 29 January 2010 04:50:34 UTC