CSS过渡和动画问题答案

【问题标题】：CSS transition and animation issueCSS过渡和动画问题
【发布时间】：2014-10-30 07:44:48
【问题描述】：

Fiddle - 我正在为页面的右上角创建一个小按钮，该按钮最初有一个动画可以在一段时间后将其隐藏。在这个动画之后，当一个 div 悬停在上面时，按钮应该能够移动，但目前 :hover 事件不起作用。这是我的 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;
}

我将如何修复这个错误？

【问题讨论】：

请包含更多您的代码（如 HTML）或制作一个 js.fiddle 以帮助重现该问题。目前没有足够的信息。
我添加了一个jsFiddle
仍然不清楚，您的 Fiddle 示例中没有 .sazookTag。
糟糕，标签现在已更改以符合 Fiddle。此处代码中的标签不应该是 .sazookTag。
如果siteTag:hover 不在页面上，你应该如何触发它？ .sazookTag 是什么？

标签： html css animation transitions

【解决方案1】：

动画把它弄乱了，所以如果你改变让动画把它放回去，它似乎可以工作 http://jsfiddle.net/66vd5g3b/4/

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

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

【讨论】：