Keyframe CSS animation overwrites hover transition

Question

I am afraid there are similar questions to this but I didn’t found a concrete solution, so I created a 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;
}   

In this (simplified) animation everything works fine except for when the mouse leaves the entire box. The animation starts from it original state, but abruptly. The basic transition time (and ease) is ignored because it seems the keyframes have higher importance and overwrite it.

What I need is the keyframe animation triggering AND when the mouse leaves it should turn back to the original state smoothly.

Is there a solution for this 1) in pure CSS 2) maybe with some little javascript only?

Thanks in advance for help and ideas!

EDIT:

After implementing the solution offered kindly by Toni this is the correct fiddle:

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

Thanks again Toni!

EDIT 2:

Sadly, yet, there is one question left. The part with the keyframes is not executed on Firefox even though I added all the -moz- vendors, too, in this fiddle:

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

Why?

PS: As far as I tested for now it works even in Opera (Beta). Only browser resisting is Firefox

EDIT 3: The correct (working) code is now in this fiddle:

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

The keyframes also need to be explicitly divided in vendor prefixes. Jesus Christ. Those prefixes…

Answer 1

Here is a jsfiddle that achieves this.

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

The animation out is assigned in the css in the main class, then the hover state kicks in on hover and css re-applies the original class properties on unhover.

The animation does trigger backwards on page load, so you might like to think of tweaking your animation to take this into account, like this example, pinched from this answer. Alternatively, use javascript (or jquery), like this example where the animations are triggered by adding and removing classes to the target using 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;
}

Also, I'd use @keyframe or transition. Use transition if you just need a simple even change from n to m but when things are more complex, such as one thing changing evenly over 100% but another thing not starting until 50% off the animation has played, then use a @keyframe

Using both will cause confusion, especially if you're trying to animate the same properties.

Finally css vendor prefixes are required