![](/img/trans.png)
[英]how to achieve *SMOOTH* fade in and out animation on mobile with jquery and css3?
[英]jQuery mouse Out call CSS3 Animation
我目前有一个用于鼠标悬停事件的CSS3动画,请参见以下内容:
#topo .menu-header ul li:hover a {
-webkit-animation: menuanimate 0.3s linear 0s both;
-moz-animation: menuanimate 0.3s linear 0s both;
-o-animation: menuanimate 0.3s linear 0s both;
-ms-animation: menuanimate 0.3s linear 0s both;
animation: menuanimate 0.3s linear 0s both;
}
@-webkit-keyframes menuanimate{
50% {
transform: rotateY(90deg);
-webkit-transform: rotateY(90deg); /* Safari and Chrome */
-moz-transform: rotateY(90deg); /* Firefox */
color: #353535;
background: url(images/bullets.png) no-repeat;
background-position: 3px 18px;
}
51% {
transform: rotateY(270deg);
-webkit-transform: rotateY(270deg); /* Safari and Chrome */
-moz-transform: rotateY(270deg); /* Firefox */
color: #fff;
background: #f15a25;
}
100% {
color: #fff; background: #f15a25;
transform: rotateY(360deg);
-webkit-transform: rotateY(360deg); /* Safari and Chrome */
-moz-transform: rotateY(360deg); /* Firefox */
}
}
问题是:当用户将鼠标从按钮上移开时,没有动画。 在CSS中没有mouse out事件,因此,有没有办法像jQuery那样调用Mouse Out的动画?
非常感谢。
您不能像使用jQuery那样调用它吗:
$('element').hover(function(e)
{
$(this).css({"rollover animation css in here..."});
},function(e)
{
$(this).css({"rolloff animation css in here..."});
});
甚至只有两个类“ .over”和“ .out”,然后使用$(this).addClass(“ over”)和相同的滚存?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.