如何用JQ控制CSS3动画出现的时机
1个回答
展开全部
在css里定义好动画类名，jQuery 对元素 addClass()，就可以实现了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在线测试页面</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
*{ padding:0;margin:0;font-size:12px; }
/*没有写兼容代码*/
.a{ animation: go 1s infinite; animation-fill-mode:both; }
@keyframes go{
from{
opacity:0;
}
to{
opacity:1;
}
}
.div{ width:50px;height:50px;border-radius:50%;background:rgba(255, 192, 203,0.5);border:2px solid pink; }
</style>
</head>
<body>
<div class="div"></div>
<button id="s">Start</button>
<button id="e">Stop</button>
</body>
<script type="text/javascript">
$(function(){
$("#s").click(function(){
$(".div").addClass("a");
});
$("#e").click(function(){
$(".div").removeClass("a");
});
});
</script>
</html>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
