kironet kironet - 10 days ago 6
Javascript Question

CSS continue animation after mouseleave

Can someone please help me with css animation? Mb I should use js too?
I want to create hover animation left->right but after mouse leave, I want to continue animation left->right not right->left.

Thanks



.button_sliding_bg {
color: #31302B;
background: #FFF;
padding: 12px 17px;
margin: 25px;
font-family: 'OpenSansBold', sans-serif;
border: 3px solid #31302B;
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: 2px;
display: inline-block;
text-align: center;
cursor: pointer;
box-shadow: inset 0 0 0 0 #31302B;
-webkit-transition: all ease 0.8s;
-moz-transition: all ease 0.8s;
transition: all ease 0.8s;
}
.button_sliding_bg:hover {
box-shadow: inset 100px 0 0 0 #31302B;
color: #FFF;
}

<button class="button_sliding_bg">
Button
</button>





I want something like this:

enter image description here

Here is the solution:



window.setTimeout(function() {
document.getElementById('btn').style.visibility = 'visible';
}, 400);

.button_sliding_bg {
visibility:hidden;
padding: 12px 17px;
margin: 25px;
font-family: 'OpenSansBold', sans-serif;
border: 3px solid #31302B;
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: 2px;
display: inline-block;
text-align: center;
cursor: pointer;
animation: animate-out 0.5s 1;
animation-fill-mode:forwards;
}
.button_sliding_bg:hover {
animation: animate-in 0.5s 1;
animation-fill-mode:forwards;
}

@keyframes animate-in {
0% {
box-shadow: inset 0 0 0 0 #31302B;
color:#31302B;
background: #FFF;
}
100% {
box-shadow: inset 100px 0 0 0 #31302B;
color:#FFF;
background: #FFF;
}
}
@keyframes animate-out {
0% {
box-shadow: inset 0 0 0 0 #FFF;
background: #31302B;
color:#FFF;
}
100% {
box-shadow: inset 100px 0 0 0 #FFF;
background: #31302B;
color:#31302B;
}
}

<button id="btn" class="button_sliding_bg">
Button
</button>




Answer

If you dont mind that it runs the first when the page loads, you can use CSS3's animation properties to get what you're trying to achieve. The trick is the combination of changing the animation-name on hover and the use of animation-fill-mode to persist the changes made. Do keep in mind that CSS3's animation is considered "experimental", however, it has almost complete coverage on the latest browser versions.

JSFIDDLE

CSS

.button_sliding_bg {
    padding: 12px 17px;
    margin: 25px;
    font-family: 'OpenSansBold', sans-serif;
    border: 3px solid #31302B;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 2px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    animation-name: animate-out;
    animation-duration: 0.5s;
    animation-repeat-count: 1;
    animation-fill-mode: forwards;
}
.button_sliding_bg:hover {
    animation-name: animate-in;
}

@keyframes animate-in {
    0% {
        box-shadow: inset 0 0 0 0 #31302B;
        color:#31302B;
        background: #FFF;
    }
    100% {
        box-shadow: inset 100px 0 0 0 #31302B;
        color:#FFF;
        background: #FFF;
    }
}
@keyframes animate-out {
    0% {
        box-shadow: inset 0 0 0 0 #FFF; 
        background: #31302B;
        color:#FFF;
    }
    100% {
        box-shadow: inset 100px 0 0 0 #FFF; 
        background: #31302B;
        color:#31302B;
    }
}