css动效keyframe⿏标事件触发<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 300px;
height: 300px;
background: red;
position: relative;
top: 0;
/*-webkit-animation: ani 1s*/
}
/*div:hover div{*/
/*-webkit-animation: ani 1s*/
/*}*/
.aa{
-webkit-animation: ani 1s
}
@-webkit-keyframes  ani{
0%{
top: 0;
}
90%{
top: 50px;
}
100%{
top: 60px;
}
}
</style>
</head>
<body>
<div>
</div>
<script src="js/jquery-1.11.3.js">
css鼠标点击样式</script>
<script>
$('div').mouseenter(function(){
$(this).addClass('aa');
})
$('div').mouseleave(function(){
$(this).removeClass('aa')
})
</script>
</body>
</html>
跟transition效果js实现⽅式⼀样，把animation的属性放到独⽴的⼀个样式中，⿏标进⼊添加该属性，即触发keyframe关键帧动画

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。