CSS3 односторонній перехід?

Використовуючи переходи CSS3, можна мати ефект `` згладжування '' та `` згладжування '' до будь-якої властивості.

Чи можу я налаштувати його так, щоб він мав лише ефект згладжування? Я хотів би, щоб рішення було лише в CSS, уникаючи JavaScript, якщо це можливо.

Логічний потік:

• Користувач клацає елементом
• Перехід займає 0,5 с, щоб змінити колір тла з білого на чорний
• Користувач відпускає ліву кнопку миші
• Перехід займає 0,5 с, щоб змінити колір тла з чорного на білий

Що я хочу:

• Користувач клацає елементом
• Для переходу потрібні 0 с
• Користувач відпускає кнопку миші
• Перехід займає 0,5 с для зміни ...

Не існує часу переходу, але є час переходу.

Я спробував наступне в редакторі CSS3 Tryit, і це працювало в 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!">