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动画和原生动画,尤其是渐隐渐现这一类的效果。

posted @ 2016-10-28 14:51  萧了个晓  阅读(1715)  评论(0编辑  收藏  举报