CSS3 one-way transition?

Question

Using CSS3 transitions, it's possible to have a 'smooth up' and 'smooth down' effect to whatever property.

Can I have it setup to have only a 'smooth down' effect? I'd like the solution to be in CSS only, avoiding JavaScript if possible.

Logic flow:

• User clicks element
• Transition takes 0.5s to change background color from white to black
• User lets go of the mouse left button
• Transition takes 0.5s to change background color from black to white

What I want:

• User clicks element
• Transition takes 0s to change
• User lets go of mouse button
• Transition takes 0.5s to change...

There's no 'transition-in' time, but there's a 'transition-out' time.

Answer 1

I tried the following in the CSS3 Tryit Editor and it worked in Chrome (12.0.742.60 beta-m).

/* transition out, on mouseup, to white, 0.5s */  input  {    background:white;    -webkit-transition:background 0.5s;    -moz-transition:background 0.5s;    -ms-transition:background 0.5s;    -o-transition:background 0.5s;    transition:background 0.5s;  }    /* transition in, on click, to black, 0s */  input:active  {    background:black;    -webkit-transition:background 0s;    -moz-transition:background 0s;    -ms-transition:background 0s;    -o-transition:background 0s;    transition:background 0s;  }

<input type="button" value="click me to see the transition effect!">