css动画和jq动画的简单区分

有很多不怎么用css3写动画的同学经常会对其中css3的transform，transition，translate，animation，@keyframes等等动画属性混淆错乱，经常使用了发现没有效果，其实都是属性用错了。
今天用几个简单的例子做一下区分；

一 利用translate 与transition结合起来的动画;

1 transition

用来描述动画过程和时间

transition: property duration timing-function delay;

transform:
用来描述动画动作和形式

transform:translate /scale /rotate/ skew /perspective ;
因为经常用到的属性也就只有translate，所以经常将transform和translate搞混；变成 translate：transform；

例如：通常描述一个简单的动画，例如渐隐渐现

div{
width:100px;
height:100px;
background:#ececec;
opacity:0;
}

.opacity-hide{
opacity:0;
transition:opacity 0.5s ease-out;
}

.opacity-show{
opacity:1;
transition:opacity 0.5s ease-out;
}

鼠标点击时动画就是：$('div').addClass('opacity-show');

setTimeout(function(time) {
$('div').addClass('opacity-hide').removeClass('opacity-show');
}, time ? time : 1500)

这里有个基础的小注意点：

opacity：1；就是显示。opacity：0；就是隐藏。
addClass，removeClass,toggleClass 是不需要加入“.”号的！

二 利用animation的动画

animation：name duration timing-function delay iteration-count direction;

1 name:就算是用@keyframes写个动画名，这个opacitykey就是动画名。

/*@keyframes opacitykey{
0% {opacity: 0}
25% {opacity: 1}
50% {opacity: 1}
75% {opacity: 1}
100% {opacity: 0}
}
2 百分比用来控制时间分布的，就是用duration，如果是2s就是按照这个比例分下去。

3 timing-function（速度曲线）：linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier(n,n,n,n);

4 delay:延迟多少时间执行；

5 iteration-count（动画播放的次数）：n|infinite；

6 direction：normal|alternate（动画轮流反向播放）这个属性一般很少用

例如我写一个例如渐现渐隐动画，持续时间2s 推迟0.5s执行，并且不断执行；
.opacity-infinite {
animation:opacitykey 2s ease-out 0.5s infinite ;
-webkit-animation:opacitykey 2s ease-out 0.5s infinite ;
}
我们把它放进.opacity-infinite这个类里，这样用这个动画就很方便了；

三 jq动画用的是animate(),比较灵活 duration单位是毫秒

$('div').animate({
width:130,
height:253,
opacity:0
},{
duration:1500,
easing:'swing',
complete: callback
});

也可以特殊化制定
$('div').animate({
left: [500, 'swing'],
top: [200, 'easeOutBounce']
});

如果需要更多的动画效果可以引入Jquery.easing的插件

当然还有其他动画形式，列出上面几种是因为，很多情况下参数的属性都容易混淆，把他们做一下简单的分类，
如果你是在移动端的话建议css3的动画执行效果要好与jq动画和原生动画，尤其是渐隐渐现这一类的效果。