关键帧 CSS 动画覆盖悬停过渡

Question

恐怕有类似的问题，但我没有找到具体的解决办法，所以我创建了一个fiddle:

http://jsfiddle.net/Garavani/yrnjaf69/2/

<div class= "category_item">

    <div class= "cat_button">
        <span class="title_cat">TEXT</span>
    </div>

</div>

CSS:

.category_item {
    position: absolute;
    background-color: #999;
    top: 100px;
    left: 50px;
    width: 200px;
    height: 200px;
    /* seems to be overwriten by animation keyframes */
    -webkit-transition: -webkit-transform 0.215s ease-in-out;
            transition: transform 0.215s ease-in-out;
    cursor: pointer;
}

.category_item:hover {
    -webkit-animation-name: easeBack;
            animation-name: easeBack;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

@-webkit-keyframes easeBack {
    0% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(-50px);
                transform: translateY(-50px);

    }
    100% {
        -webkit-transform: translateY(-30px);
                transform: translateY(-30px);
    }
}   

.cat_button {
    position: absolute;
    width: 200px;
    height: 55px;
    bottom: 0;
    border: 2px solid #fff;
    color: #fff;
    -webkit-transition: background 0.215s ease-in-out, border 0.215s ease-in-out, color 0.215s ease-in-out;
    transition: background 0.215s ease-in-out, border 0.215s ease-in-out, color 0.215s ease-in-out;
}

.category_item:hover .cat_button {
    background: #fff;
    border-color: #fff;
    color: #511c5b;
}

在这个（简化的）动画中，除了鼠标离开整个框时，一切都正常。动画从它的原始状态开始，但是很突然。基本过渡时间（和缓和）被忽略，因为关键帧似乎具有更高的重要性并覆盖它。

我需要的是关键帧动画触发，并且当鼠标离开时它应该平滑地回到原来的状态。

有解决办法吗 1) 纯 CSS 2) 也许只有一些 javascript？

在此先感谢您的帮助和想法！

编辑：

在实施 Toni 提供的解决方案后，这是正确的 fiddle:

http://jsfiddle.net/yrnjaf69/40/

再次感谢托尼！

编辑 2：

遗憾的是，还有一个问题。即使我在这个 fiddle:

中也添加了所有 -moz- 供应商，但带有关键帧的部分不会在 Firefox 上执行

http://jsfiddle.net/dr6Ld0wL/1/

为什么？

PS：据我目前测试，它甚至在 Opera (Beta) 中也能正常工作。唯一抵抗的浏览器是 Firefox

编辑 3： 正确的（有效的）代码现在在 fiddle:

http://jsfiddle.net/dr6Ld0wL/16/

关键帧也需要在供应商前缀中明确划分。耶稣基督。那些前缀…

Answer 1

这是实现此目的的 jsfiddle。

.demo-hover {
    position: relative;
    margin: 100px;
    animation: complexProcessReversed 2s ease-in forwards;
    width: 160px;
    height: 160px;
    background-color: #88d;
}
.demo-hover:hover {
    animation: complexProcess 2s ease-in forwards;
    width: 100px;
    height: 100px;
    background-color: #732;
}

@keyframes complexProcess {
    /* keyframes */
}

@keyframes complexProcessReversed {
    /* keyframes (opposite) */
}

动画输出在主 class 的 css 中分配，然后悬停状态在悬停时开始，css 重新应用原始 class悬停时的属性。

动画确实会在页面加载时向后触发，因此您可能会考虑调整动画以考虑到这一点，例如 this example, pinched from this answer. Alternatively, use javascript (or jquery), like this example 通过添加和删除 class 来触发动画es 到目标使用 jquery:

JavaScript

$('.demo-hover').hover(
    function() {
        // mouse in
        $(this).removeClass('forwards--reversed').addClass('forwards');
    },    
    function() {
        // mouse out
        $(this).removeClass('forwards').addClass('forwards--reversed');
    }
);

CSS

.forwards {
    animation: complexProcess 2s ease-in forwards;
    width: 100px;
    height: 100px;
    background-color: #732;
}

.forwards--reversed {
    animation: complexProcessReversed 2s ease-in forwards;
    width: 160px;
    height: 160px;
    background-color: #88d;
}

此外，我会使用 @keyframe 或 transition。如果您只需要从 n 到 m 的简单偶数更改，请使用 transition 但是当事情更复杂时，例如一件事情改变平均超过 100% 但另一件事直到动画播放 50% 后才开始，然后使用 @keyframe

同时使用两者会造成混淆，尤其是当您尝试为相同的属性设置动画时。

最后 css 需要供应商前缀

关键帧 CSS 动画覆盖悬停过渡

Keyframe CSS animation overwrites hover transition

css

hover

keyframe

css-animations