[css3-transitions] Add direction selectors for transitions

Hello !
My idea would be to allow the use of different transitions depending on
the direction of the transition.
By direction, I mean whether the value is increased or decreased during
the transition.

This would allow simple things like :

#my_element{
width:50px;
height:50px;
opacity:0.2;
transition:
    width-increase 1s,
    width-decrease 1s 1s,
    height-increase 1s 1s,
    height-decrease 1s,
    opacity-increase: 0.5s 1.5s,
    opacity-decrease: 0.5s;
}

#my_element:hover{
width:100px;
height:100px;
opacity:1;
}

In this case, when we hover #my_element, it would grow, starting
horizontally, ending vertically. The opacity would increase when the
element is almost big.
When we move the pointer elsewhere, it would revert fully the animation,
decreasing the opacity and the height right at the beginning, and ending
with the width.

The use of the properties without direction would overwrite both of
them, so :
transition:
    width-increase 1s,
    width: 2s,
    width-decrease 1s 1s;

would be the same as
transition:
    width: 2s,
    width-decrease 1s 1s;


Those special properties would of course only exist when they are
relevant, like lengths, percentages, calc()s, number and integer
(equivalents might be found for other value types, like
visibility-appear and visibility-disapear).

Of course, it would also allow to have a long animation when showing an element and a quick one when hiding it.

Would that be very complicated to create?

-- 
*Brice PARENT*

Received on Friday, 28 June 2013 14:59:59 UTC