Как сделать разные эффекты при наведении мыши и после ее убирания? Когда добавляем transition, например, к ссылке, то получаем одинаковый эффект в обе стороны.... Оказывается, проблема решается элементарно: transition, добавленный к самой ссылке, будет работать при убирании мыши ("mouseleave"), а добавленный к a:hover - при наведении мыши ("mouseenter")
Пример:
#thing {
padding: 10
border-radius: 5
/* HOVER OFF */
-webkit-transition: padding 2s;
}
#thing:hover {
padding: 20
border-radius: 15
/* HOVER ON */
-webkit-transition: border-radius 2s;
}
Спасибо Крису
Иллюстративное демо Криса