CSS过渡和动画问题

Question

Fiddle - I am creating a small button for the top right corner of my page, which initially has an animation to hide it after a certain time. After this animation, the button is supposed to be able to move when a div is hovered on, but currently the :hover event is not working.Here is my CSS code:

.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;
}

How would I fix this bug?

Answer 1

The animation was messing with it so if you change to have an animation bring it back down it seems to work http://jsfiddle.net/66vd5g3b/4/

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

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