Re: [css3-transitions] Add direction selectors for transitions

On Fri, 28 Jun 2013 16:59:29 +0200, Brice PARENT <brice@websailors.fr>  
wrote:

> #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;
> }

This sounds like something that's already achievable:

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

#my_element:hover {
     width: 100px;
     height: 100px;
     opacity: 1;
     transition: width 1s, height 1s 1s, opacity 0.5s 1.5s;
}

Transition properties are taken from the "to" state:  
http://dev.w3.org/csswg/css-transitions/#starting

This also works for properties whose values can't be ordered (like  
'color', 'background-position' and 'transform').

-- 
Øyvind Stenhaug
Opera Software ASA

Received on Friday, 28 June 2013 15:38:54 UTC