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

Question

Используя переходы CSS3, можно получить эффект «сглаживания» и «сглаживания» для любого свойства.

Можно ли настроить его так, чтобы он имел только эффект «сглаживания»?Я хотел бы, чтобы решение было только в CSS, избегая JavaScript, если это возможно.

Логический поток:

• Пользователь щелкает элемент
• Переход занимает 0,5 с, чтобы изменитьцвет фона с белого на черный
• Пользователь отпускает левую кнопку мыши
• Переход занимает 0,5 с, чтобы изменить цвет фона с черного на белый

Что я хочу:

• Пользователь щелкает элемент
• Переход занимает 0 с, чтобы изменить
• Пользователь отпускает кнопку мыши
• Переход занимает 0,5 с, чтобы изменить ...

Нет времени «входа», но есть время «выхода».

Answer 1

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