Clever Geek Handbook

CSS keyframe animation overwrites hover transition

I'm afraid there are similar questions, but I didn't find a specific 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 that the mouse leaves the entire box. The animation starts from its original state, but suddenly. The main transition time (and ease) is ignored because the keyframes seem to be more important and overwrite it.

What I need is to trigger the keyframe animation And when the mouse leaves, it should smoothly return to its original state.

Is there a solution for this 1) in pure CSS 2) perhaps with just a little javascript?

Thanks in advance for your help and ideas!

EDIT:

After implementing the solution suggested by Tony, this is the correct fiddle:

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

Thanks again Tony!

EDIT 2:

Unfortunately, one question remains. The keyframe part is not executed in Firefox, although I added all the -moz-vendors to this script:

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

Why?

PS: As far as I have checked now, it even works in Opera (Beta). Only the browser supports Firefox

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

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

Keyframes must also be explicitly separated by vendor prefixes. Jesus Christ. These prefixes ...

+3


source to share


1 answer


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 output is assigned in css in the main class, then the hover state is triggered on hover, and css reapplies the original class properties in unhover.

The animation runs backwards on page load, so you may need to tweak your animation to take that into account, for example this example pinched from this answer . Alternatively, use javascript (or jquery) like this example where animations are triggered by adding and removing classes to the target with 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 would use @keyframe

or transition

. Use transition

if you just need a simple change from n to m, but when things are more complex, for example one thing changes evenly by 100%, but another thing that doesn't start before 50% of the animation, T23>

Using both methods will be confusing, especially if you are trying to animate the same properties.

Finally, css vendor prefixes are required

+1


source






More articles:


All Articles