Animation

http://htmlbook.ru/index.php/css/transition Поработать здесь со значениями переходов анимации.

by akogch

HTML

<ul id="bar">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>&darr;</li>
</ul>

CSS

#bar {
  top: -5.5em;
  right: 5em;
  /* Положение */
  padding: 0.5em;
  /* Поля */
  margin: 0;
  /* Отступы */
  position: absolute;
  /* Абсолютное позиционирование */
  width: 2em;
  /* Ширина */
  background: #333;
  /* Цвет фона */
  color: #fff;
  /* Цвет текста */
  text-align: center;
  /* Выравнивание по центру */
  /* Переход */
  -webkit-transition: top 0.25s ease-out 0.25s;
  -moz-transition: top 0.25s ease-out 0.25s;
  -o-transition: top 0.25s ease-out 0.25s;
  transition: top 0.25s ease-out 0.25s;
}

#bar:hover {
  top: 0;
}