<!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）该怎么写呢？
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
js syntax error, cancel the error and directly use css to trigger css3 animation
Of course, it is still not recommended to mix jquery animation and css3 animation. I have written an effect for you using css3. You can change it as you like
http://jsfiddle.net/Fmdrx/
http://www.cnblogs.com/WitNesS/p/4643019.html