jQuery鼠标输出调用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中没有鼠标退出事件,那么,有没有一种方法可以像jQuery中那样调用鼠标退出的动画?
提前非常感谢。
你不能用jQuery来调用它吗?比如:
$('element').hover(function(e)
{
$(this).css({"rollover animation css in here..."});
},function(e)
{
$(this).css({"rolloff animation css in here..."});
});
或者甚至只有两个类".over"answers".out",然后使用$(this).addClass("over")&在滚落时也是这样?
相关文章:
- 关键帧之间的css3动画延迟
- 访问css3动画的关键帧
- CSS3动画图像质量按比例
- jQuery鼠标输出调用CSS3动画
- 使用带有onclick事件的Javascript启动CSS3动画
- 在 CSS3 动画完成后重新加载 JavaScript
- 如何正确地链接调用$.show()和$.thoggClass()来触发CSS3动画
- css3动画文本居中对齐
- Chrome在尝试从Javascript修改CSS3动画时崩溃
- 如何用Javascript覆盖CSS3动画
- 在没有关闭H/W加速的情况下优化CSS3动画会让它在GPU上运行得更快吗
- 如何使用JavaScript对象编写CSS3动画
- jQuery有没有,或者有没有jQuery插件,内置了监听CSS3动画事件的功能(例如animationEnd)
- 如何内联或通过javascript设置css3动画
- css3动画使用html5数据属性
- css3 动画中的虚线边框动画
- CSS3 动画和 JavaScript 类切换后的动画出现问题
- 停止并重新启动 CSS3 动画
- 展开 CSS3 动画不起作用
- CSS3 动画 - 无限悬停箭头