Проблема перехода CSS и анимации

Question

Fiddle - Я создаю маленькую кнопку для верхнего правого угла моей страницы, изначально имеющую анимацию, чтобы скрыть ее через определенное время. После этой анимации, кнопка должна быть в состоянии двигаться, когда ДИВ наведен, но в настоящее время: событие парения не working.Here мой CSS код:

.siteTagArea { 
    width: 80px; 
    height: 40px; 
    position: absolute; 
    right: 0px; 
    top: 0px; 
    z-index: 9; 
} 

.siteTag { 
    width: 60px; 
    height: 20px; 
    position: absolute; 
    right: 10px; 
    top: 10px; 
    text-align: center; 
    border-radius: 3px; 
    line-height: 20px; 
    font-size: 10px; 
    text-transform: uppercase; 
    border: none; 
    border-bottom: 2px solid rgba(0, 0, 0, 0.2); 
    background-color: rgba(0, 0, 0, 0.4); 
    color: #fff; 
    z-index: 10; 
    -webkit-transition: 0.2s; 
    -webkit-animation: moveup 2s 1; 
    -webkit-animation-delay: 2s; 
    -webkit-animation-fill-mode: forwards; 
} 

@-webkit-keyframes moveup { 
    from {top: 10px;} 
    to {top: -22px;} 
} 

.siteTagArea:hover + .sazookTag { 
    top: 10px; 
} 

.siteTag:hover { 
    top: 10px; 
} 

Как исправить эту ошибку?

Answer 1

Анимация была возиться с ним, так что если вы меняете, чтобы анимация вернуть его обратно вниз, кажется, работает http://jsfiddle.net/66vd5g3b/4/

@-webkit-keyframes movedown { 
     from {top: -22px;} 
     to {top: 10px;} 
} 

.siteTagArea:hover + .siteTag { 
     -webkit-animation: movedown 2s 1; 
}