<h2>Классический</h2>
  <a class="link pekodun-pevasod">Переход</a>
  <a class="link pekodun-pevasod">Переход 2</a>
  <a class="link pekodun-pevasod">Переход 3</a>
  <a class="link pekodun-pevasod">Переход 4</a>
  <a class="link pekodun-pevasod">Переход 5</a>
  <h2>Классический бутерброд</h2>
  <a class="link pekodun-pevasodsub">ZorNet.Ru — 1</a>
  <a class="link pekodun-pevasodsub">ZorNet.Ru — 2</a>
  <a class="link pekodun-pevasodsub">ZorNet.Ru — 3</a>
  <a class="link pekodun-pevasodsub">ZorNet.Ru — 4</a>
  <a class="link pekodun-pevasodsub">Los ZorNet.Ru — 5</a>
  <h2>Слева направо</h2>
  <a class="link anim-lefttoright">Клик-1</a>
  <a class="link anim-lefttoright">Клик-2</a>
  <a class="link anim-lefttoright">Клик-3 </a>
  <a class="link anim-lefttoright">Клик-4 </a>
  <a class="link anim-lefttoright">Клик-5</a>
  <h2>Справа налево</h2>
  <a class="link anim-righttoleft">эффекты1</a>
  <a class="link anim-righttoleft">эффекты2</a>
  <a class="link anim-righttoleft">эффекты3</a>
  <a class="link anim-righttoleft">эффекты4</a>
  <a class="link anim-righttoleft">эффекты5</a>
  <h2>Середина</h2>
  <a class="link anim-middleout">Tatvan</a>
  <a class="link anim-middleout">Izmir</a>
  <a class="link anim-middleout">Istanbul</a>
  <a class="link anim-middleout">Hakkari</a>
  <a class="link anim-middleout">Los Angeles</a>
  <h2>Бесконечность</h2>
  <a class="link anim-test" data-hover="Tatvan">Первый</a>
  <a class="link anim-test" data-hover="Izmir">Второй</a>
  <a class="link anim-test" data-hover="Istanbul">Третий</a>
  <a class="link anim-test" data-hover="Hakkari">Четвертый</a>
  <a class="link anim-test" data-hover="Los Angeles">Пятый</a>  
  <h2>Рейс</h2>
  <a class="link anim-destination"><span data-hover="Tatvan">Красивый</span></a>
  <a class="link anim-destination"><span data-hover="Izmir">Стильный</span></a>
  <a class="link anim-destination"><span data-hover="Istanbul">Оригинальный</span></a>
  <a class="link anim-destination"><span data-hover="Hakkari">Цветной</span></a>
  <a class="link anim-destination"><span data-hover="Los Angeles">Яткий</span></a>
  <h2>Я здесь</h2>
  <a class="link anim-iamhere">Я здесь 1</a>
  <a class="link anim-iamhere">Я здесь 2</a>
  <a class="link anim-iamhere">Я здесь 3</a>
  <a class="link anim-iamhere">Я здесь 4</a>
  <a class="link anim-iamhere">Я здесь 5</a>
  <h2>Необычный бутерброд</h2>
  <a class="link anim-fancysub">Оригинал</a>
  <a class="link anim-fancysub">Блеск</a>
  <a class="link anim-fancysub">Универсал</a>
  <a class="link anim-fancysub">Хром</a>
  <a class="link anim-fancysub">Переход</a>
  <h2>Необычный ключ</h2>
  <a class="link anim-fancywrench">Татван</a>
  <br>
  <a class="link anim-fancywrench">Измир</a>
  <br>
  <a class="link anim-fancywrench">Стамбул</a>
  <br>
  <a class="link anim-fancywrench">Hakkari</a>
  <br>
  <a class="link anim-fancywrench">Лос-Анджелес</a>

h2 {
  font-size: 2.5em;
}

div.row-fluid {
  text-align: center;
  margin-top: 4em;
}

div.row-fluid a {
    margin-left: 0.3em;
    margin-bottom: 0.6em;
}

.link {
  font-size: 2em;
  font-weight: 300;
  cursor: pointer;
  display: inline-block;
  position: relative;
  margin-bottom: 0.5em;
}

.link.anim-destination {
    display: inline-block;
    overflow: hidden;
    padding-right: 0.5em;
    font-size: 2em;
}

.link.anim-destination span {
    position: relative;
    display: inline-block;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}

.link.anim-destination span::before {
    position: absolute;
    white-space: nowrap;    
    top: 100%;
    content: attr(data-hover);
    font-weight: 500;
}

.link.anim-destination:hover span,
.link.anim-destination:focus span {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}

.link.anim-test {
  font-weight: 400;
  color: #ddd;
}

.link.anim-test:after {
  position: absolute;
  content: attr(data-hover);    
  color: black;
  top: 0em;
  display: block;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

.link.anim-test:hover:after {
  opacity: 0;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}

.link.anim-iamhere {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.link.anim-iamhere:hover {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    color: blue;
}

.link.pekodun-pevasod {
  border-bottom: 3px solid transparent;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}

.link.pekodun-pevasod:hover {
  border-bottom: 3px solid blue;
}

.link.pekodun-pevasodsub {
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

.link.pekodun-pevasodsub:hover {
  border-top: 3px solid blue;
  border-bottom: 3px solid blue;
}

.link.anim-fancysub:after {
  content: '';
  position: absolute;
  top: -0.6em;
  display: block;
  width: 100%;
  height: 2em;
  border-top: 0.1em solid transparent;
  border-bottom: 0.1em solid transparent;
  background: transparent;
  transition: all .5s ease;
}

.link.anim-fancysub:hover:after {
  border-top: 0.1em solid blue;
  border-bottom: 0.1em solid blue;
  top: -0.1em;
  height: 1.2em;
}

.link.anim-fancywrench:after {
  content: '';
  position: absolute;
  top: 0em;
  left: -33%;
  display: block;
  width: 150%;
  height: 1em;
  border-right: 0.1em solid transparent;
  border-left: 0.1em solid transparent;
  background: transparent;
  transition: all .5s ease;
}

.link.anim-fancywrench:hover:after {
  border-right: 0.1em solid blue;
  border-left: 0.1em solid blue;
  left: -4%;
  width: 104%;
}

.link.anim-lefttoright:after {
  content: '';
  display: block;
  width: 0;
  height: 3px;
  background: blue;
  transition: all .5s ease;
}

.link.anim-lefttoright:hover:after {
  width: 100%;
}

.link.anim-righttoleft:after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  width: 0;
  height: 3px;
  background: blue;
  transition: all .5s ease;
}

.link.anim-righttoleft:hover:after {
  width: 100%;
}

.link.anim-middleout:after {
  content: '';
  display: block;
  width: 0;
  height: 3px;
  background: blue;
  margin: auto;
  transition: all .5s ease;
}

.link.anim-middleout:hover:after {
  width: 100%;
}