在mouseleave之后CSS继续动画 [英] CSS continue animation after mouseleave

问题描述

有人可以帮助我用css动画吗？我应该也用js吗？
我想创建悬停动画left-> right但是在鼠标离开后，我想继续动画left-> right right right-> left。

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.

谢谢

.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:

以下是解决方案：

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>

推荐答案

如果你不介意它在页面加载时运行第一个，你可以使用CSS3的动画属性来获得你想要实现的目标。诀窍是在悬停时更改动画名称并使用 animation-fill-mode 以保留所做的更改。请记住，CSS3的动画被认为是实验性的，但它有几乎完整的报道关于最新的浏览器版本。

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

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;
    }
}

这篇关于在mouseleave之后CSS继续动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！