<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").animate({
width:'200px',
height:'200px',
transform:'rotate(360deg)';
-webkit-transform:'rotate(360deg)';
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p style="width:100px;
height:100px;
background:yellow;
transition:width 2s, height 2s;
-webkit-transition:width 2s, height 2s, -webkit-transform 2s;">
</p>
</body>
</html>
如果想实现这种效果（我鼠标点“开始动画”然后p就转一圈然后fadeOut）该怎么写呢？
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
js语法错误，取消掉错误以后直接用css就可以触发css3动画
当然了，还是不建议jquery动画和css3动画混用,帮你用css3写了一个效果，你看着改一下吧
http://jsfiddle.net/Fmdrx/
http://www.cnblogs.com/WitNesS/p/4643019.html