Подтвердить что ты не робот

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

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

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

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

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

Что я хочу:

Пользователь нажимает элемент
Переход занимает 0 секунд для изменения
Пользователь позволяет перейти от кнопки мыши
Переход изменится на 0,5 с...

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

Ответ 1

Я попробовал следующее в CSS3 Tryit Editor и работал в Chrome (12.0.742.60 бета-м).

/* 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!">