html5 - style - ¿Transición unidireccional de CSS3?

style html

Question

Con las transiciones CSS3, es posible tener un efecto de "suavizado" y "suavizado" a cualquier propiedad.

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

Flujo lógico:

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

Lo que quiero:

• El usuario hace clic en el elemento
• La transición toma 0s para cambiar
• El usuario suelta el botón del mouse
• La transición toma 0.5s para cambiar ...

No hay un tiempo de "transición", pero hay un tiempo de "transición".

Answer 1

Intenté lo siguiente en el editor Tryit de 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!">