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

恐怕也有类似的问题，但我没有找到具体的解决方案，所以我创建了一个小提琴：

http://jsfiddle.net/Garavani/yrnjaf69/2/ 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？

预先感谢您的帮助和想法！

EDIT:

在实施托尼好心提供的解决方案后，这是正确的小提琴：

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

再次感谢托尼！

EDIT 2:

遗憾的是，还有一个问题。尽管我也在这个小提琴中添加了所有 -moz- 供应商，但带有关键帧的部分并未在 Firefox 上执行：

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

Why?

PS：据我目前测试，它甚至可以在 Opera（Beta）中运行。唯一抵抗的浏览器是 Firefox

EDIT 3:正确的（工作的）代码现在在这个小提琴中：

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

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

这里有一个jsfiddle http://jsfiddle.net/yrnjaf69/31/达到这个目的。

.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) */
}

动画输出在主类的 css 中分配，然后悬停状态在悬停时启动，并且 css 在取消悬停时重新应用原始类属性。

动画确实会在页面加载时向后触发，因此您可能需要考虑调整动画以考虑到这一点，例如这个例子 http://jsfiddle.net/JjHNG/35/, 捏自这个答案 https://stackoverflow.com/a/16516826/1249829。或者，使用 javascript（或 jquery），例如这个例子 http://jsfiddle.net/yrnjaf69/25/其中通过使用 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 or transition. Use transition如果你只需要一个简单的改变n to m但当事情更复杂时，例如一件事均匀变化超过 100%，但另一件事直到动画播放完 50% 后才开始，然后使用@keyframe

使用两者会导致混乱，特别是当您尝试为相同的属性设置动画时。

Finally 需要 css 供应商前缀