Неочевидная анимация элементов страницы

Реакция hover на элементах интерфейса – одно из основных проявлений интерактивности веб-страниц. Видя эту реакцию, пользователь чаще всего понимает, что что-то произойдет, если он кликнет. Чем приятнее hover, тем больше пользователю понравится наводить мышкой на элемент. Вариаций hover'a достаточно много, но можно ли сделать его еще приятнее?
Анимированный hover – это, в большинстве случае, красиво (а если анимация сделана при помощи CSS, то еще и не так страшно). Поэтому, я немного расскажу о том, как разнообразить hover.

Самое простое — изменение цвета текста ссылки или изменение фона кнопки (в случае, если фон кнопки — обычный цвет, либо сделан при помощи CSS-градиентов). Во всех этих случаях достаточно добавить свойство transiton для нужного элемента.

CSS

a {
  color: #0f0;
  transition:color .3s
}
a:hover {
  color:#f00
}

input[type=submit],
input[type=button],
button {
  background:#fff;
  border:1px solid #ccc;
  color:#000;
  transition:background-color .3s
}
input[type=submit]:hover,
input[type=button]:hover,
button:hover {
  background:#eee;
}

Способ использования transition уже был рассмотрен в статье CSS3 сейчас — transition

CSS свойство transition позволяет анимировать большинство свойств, но у него есть небольшие ограничения, а именно:

text-decoration
Подчеркивание ссылки при наведении или наоборот, при неактивной ссылке – одно из самых популярных способов выделения. Можно ли замедлить появление и исчезновение подчеркивания? Легко.

CSS

a {
  color: #0f0;
  text-decoration: none;
  border-bottom: 1px solid #0f0;
  transition:border-color .3s
}
a:hover {
  border-color:#fff; /* для старых браузеров, с расчетом на белый цвет фона */
  border-color:rgba(0,0,0,0)
}

background-image
Анимация изменения цвета фона реализуется легко, а вот плавная смена изображения — нет. Обойти это тоже можно.

CSS

button {
  position:relative;
  border:0;
  background:0 none;
  width:150px;
  height:30px
}
button:before,
button:after {
  position:absolute;
  content:'';
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:url('buttonBG.png') /* изображение 150*60px с фоном в двух состояниях */
}
button:after {
  z-index:2;
  transition:opacity .3s;
  opacity:0
}
button:hover:after {
  opacity:1
}

В случае, если нужно использовать именно input[type=submit], придется поступить немного по-другому. Например, поле поиска в шапке страницы с кнопкой в виде лупы, расположенной поверх поля ввода.
Для этого добавим дополнительный элемент с фоном, идущий за кнопкой. Сама кнопка в этом случае не будет отображаться, но можно будет на неё кликнуть.

HTML

<form class="search-form" method="post" action="/">
  <input type="search" name="search" class="search-input" />
  <input type="submit" class="search-submit" value="" />
  <div class="search-submit-helper"></div>
</form>

CSS

.search-form {
  position:relative;
  width:100px;
  height:30px
}
.search-input {
  height:28px;
  width:53px;
  padding:0 35px 0 10px;
  font:12px/28px Arial
}
.search-submit-helper,.search-submit,.search-submit-helper:before,.search-submit-helper:after {
  position:absolute;
  height:30px;
  width:30px;
  border:0;
  background:0 none;
  z-index:2;
  top:0;
  right:0
}
.search-submit-helper {
  z-index:1
}
.search-submit-helper:before,.search-submit-helper:after {
  background:url('buttonBG.png') /* изображение 30*60px с фоном в двух состояниях */
  z-index:1
}
.search-submit-helper:after {
  transition:opacity .3s;
  opacity:0;
  z-index:2;
  background-position:0 -100%;
}
.search-submit:hover + .search-submit-helper:after {
  opacity:1
}