CSS3 transición unidireccional?

Question

Usando transiciones CSS3, es posible tener un efecto 'suavizar' y 'suavizar' a cualquier propiedad.

¿Puedo configurarlo para que tenga solo un efecto de "suavizado"? Me gustaría que la solución esté en CSS solamente, evitando JavaScript si es posible.

flujo lógico:

• usuario hace clic en el elemento
• Transición toma 0,5 segundos para cambiar el color de fondo de blanco a negro
• usuario suelta el botón izquierdo del ratón
• Transición lleva a 0.5s cambiar el color de fondo de negro a blanco

Lo que quiero:

• usuario hace clic en el elemento
• transición tiene 0s a cambiar
• usuario suelta el botón del ratón
• Transición toma 0,5 segundos para cambiar ...

No hay 'transición-in' tiempo, pero hay un tiempo de 'transición'.

Answer 1

Intenté lo siguiente en el editor Tryit CSS3 y funcionó en 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!">