[英]mouse hover in CSS3
have this CSS3 code: 拥有以下CSS3代码:
#box1
{
position: relative;
width: 300px;
border: 1px solid black;
box-shadow: -3px 8px 34px #808080;
border-radius: 20px;
box-shadow: -8px 5px 5px #888888;
right: 700px;
top: -200px;
height: 150px;
}
@-webkit-keyframes myfirst {
0% { right:700px; top:-200px;background: yellow;}
50% {background:blue; right:700px; top:200px;}
100% { right:700px; top:-200px; background: yellow}
}
#stam {
font-size: large;
background: green;
width: 100px;
top: 400px;
position: absolute;
}
#stam:hover ~ #box1 { -webkit-animation:myfirst 2s; }
you can see how the code works here: http://jsfiddle.net/FLe4g/2/ 您可以在此处查看代码的工作原理: http : //jsfiddle.net/FLe4g/2/
my question is: how can I do the animation so when I put the mouse on "stam" div the animation will stop on "50%" ( 50% {background:blue; right:700px; top:200px;})
of the animation, and only when I move the mouse from "stam" div, the animation continue? 我的问题是:如何制作动画,所以当我将鼠标放在“ stam” div上时,动画将停止在动画的“ 50%” ( 50% {background:blue; right:700px; top:200px;})
上动画,只有当我将鼠标从“ stam” div移开时,动画才继续吗? I'm really prefer that the solution will be with CSS3 and not with js... thank you! 我真的更喜欢该解决方案将使用CSS3而不是js ...谢谢!
For backward animation i used transition, so when you going forward you use animation frames and when you go backward you use transition: 对于后向动画,我使用了过渡,所以当您向前移动时,您会使用动画帧;而当您向后移动时,您会使用过渡:
#box1
{
position: relative;
width: 300px;
border: 1px solid black;
box-shadow: -3px 8px 34px #808080;
border-radius: 20px;
box-shadow: -8px 5px 5px #888888;
right: 300px;
top: -200px;
height: 150px;
-webkit-transition: all 2s;
}
@-webkit-keyframes myfirst {
0% { right:300px; top:-200px;background: yellow;}
100% {background:blue; right:500px; top:200px;}
}
#stam {
font-size: large;
background: green;
width: 100px;
top: 400px;
position: absolute;
}
#stam:hover ~ #box1 {
-webkit-transition: all 0s;
background:blue; right:500px; top:200px;
-webkit-animation:myfirst 2s;
-webkit-animation-fill-mode: forwards;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.