jquery配合css3动画学习_H5之家 - 中国HTML5教程资源分享第一站

楼主 [编辑] 作者： 3 于 13-04-11

jquery配合css3动画学习记录，大致思路是，给要做动画的设置 div{ transition:all 1s ease-in .1s; }具体参数参考API，然后使用jquery或者原生js来设置动画对象的css即可，使用添加移除类名的办法也是可以的。

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>移动旋转缩放 - 懒人建站 </title>
<script type="text/javascript" src=""></script>
<script>
$(function(){
   //setTimeout(function(){
         //$("#box1").addClass("yidong_xuanzhuang_suofang");
       $("#box1").css({
           'transform':'translate(150px,200px) rotate(60deg) scale(1.5)'
       });
   // },1000);
   setTimeout(function(){
         //$("#box1").addClass("yidong_xuanzhuang_suofang");
       $("#box1").css({'opacity':'0'});
    },4000);

});
</script>
<style>
body{ padding:60px;}
div{ width:100px; height:100px; background-color:#F00;}

div{       transition:all 1s ease-in .1s;   }
div:hover{transform:translate(150px,200px) rotate(60deg) scale(1.5);   background-color:#060;}
.yidong_xuanzhuang_suofang{/*transform:translate(150px,200px) rotate(60deg) scale(1.5)*/;}
</style>
</head>
<body>
<h2>移动旋转缩放</h2>
<div id="box1">jquery特效 </div>
</body>

</html>

当然，这里的动画用纯css也可以实现，要用css3中的关键帧。

移除css3动画

"transition":"none","transform":"none",