本文介绍了在mouseleave之后CSS继续动画的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
有人可以帮助我用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的动画
属性来获得你想要实现的目标。诀窍是在悬停时更改动画名称
并使用以保留所做的更改。请记住,CSS3的动画被认为是实验性的,但它有
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继续动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!