Re: [css3-transitions] starting and reversing animations

On Thu, Jan 28, 2010 at 10:50 PM, Andrew Fedoniouk
<news@terrainformatica.com> wrote:
> 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.

It certainly does support such a thing, just not 'automatically'.  If
you specify the reverse transition on the div:hover state, it will use
that instead.

I don't think that, in general, there is a coherent notion of
'reverse' transitions.  Say that, in addition to the rules you had
above, you have the following CSS:

div.one { height: 200px; }
div.two { height: 300px; }

If you set the .one class programmatically, it should delay for 1s,
then animate to 200px height over 1s.  Then say that you add .two
programmatically.  It should also delay for 1s, then animate to 300px
height over 1s.  Now what is a reverse transition?  If you remove
.two?  If you remove .two, and then remove .one?  If you remove both
.one and .two at the same time?

You're right that these all work the same way - it will delay for 1s,
then animate to the new height over 1s.  If you want something to
'reverse', you can specify it explicitly on the second rule.  Frex,
you can add to your :hover rule:

div:hover {
  transition: width 1s linear 1s, height 1s linear;
}

That way, once you're in the hover state, if you leave it the new,
reversed transition rules will apply.

~TJ

Received on Friday, 29 January 2010 05:17:05 UTC