有很多不怎么用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动画和原生动画,尤其是渐隐渐现这一类的效果。