Разная скорость затухания

Question

Я начинаю практиковать некоторые анимации CSS3. У меня есть пример кода здесь: http://jsfiddle.net/chricholson/z7Bg6/67/

Интересно, как я могу указать большую длительность анимации при наведении курсора? В настоящий момент может потребоваться использовать те же временные параметры и параметры, которые применяются для применения стилей, чтобы удалить их при наведении курсора. Я хотел бы установить его так, чтобы при расшатывании требовалось намного больше времени (преувеличено до 2 секунд), чтобы цвет фона вернулся к нормальному состоянию, но все равно потребовалось 0,1 с, чтобы исчезнуть при наведении.

Answer 1

Это может показаться нелогичным, но вы на самом деле применили бы большую длительность к своему обычному коду селектора и меньшую длительность к своему: hover и: селекторному коду фокуса.

По сути, вы можете думать о нормальномстиль как то, что будет происходить при не зависании / фокусировке.

См. это обновленное JSFiddle .