CSS3 transition à sens unique?

En utilisant les transitions CSS3, il est possible d’avoir un effet de «lissage» et de «lissage» pour toutes les propriétés.

Puis-je le configurer pour qu’il n’y ait qu’un effet de lissage? Je voudrais que la solution soit en CSS uniquement, en évitant JavaScript si possible.

Flux logique:

  • Utilisateur clique sur l’élément
  • La transition prend 0.5s pour changer la couleur de fond du blanc au noir
  • L’utilisateur lâche le bouton gauche de la souris
  • La transition prend 0,5 seconde pour changer la couleur de fond du noir au blanc

Ce que je veux:

  • Utilisateur clique sur l’élément
  • La transition prend 0 pour changer
  • L’utilisateur lâche le bouton de la souris
  • La transition prend 0.5s pour changer …

Il n’y a pas de temps de transition, mais il y a une période de transition.

J’ai essayé ce qui suit dans l’éditeur CSS3 Tryit et cela a fonctionné dans 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; }