普遍的动画效果

普遍的动画效果

1.css的transition

transition: property duration timing-function delay;

(默认值分别为：all 0 ease 0 )

property:填写需要变化的css属性如：width,line-height,font-size,color等;

duration:完成过渡效果需要的时间（2s 或者2000ms）

timing-function:完成效果的速度曲线（linear匀速,ease慢快慢,ease-in从低速开始,ease-out以低速结束,ease-in-out低速开始和结束）

delay:动画效果的延迟触发时间（2s 或者2000ms）

2.css3的animation属性

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

name:keyframe的名称，也就是定义了关键帧的动画的名称,这个名称用来区别不同的动画。

duration:完成动画所需要的时间（2s 或者 2000ms）

timing-function:完成动画的速度曲线

delay：动画开始之前的延迟

iteration-count：动画播放次数

direction：是否轮流反向播放动画（normal:正常顺序播放，alternate下一次反向播放）如果把动画设置为只播放一次，则该属性没有效果。

3.Jquery的animate函数

$(select).animate(styles,options)
(兼容所有浏览器)

styles:产生动画的css样式和值；

options={

speed:动画的速度（可选参数：slow,normal,fase）

easing：动画的速度函数（可选参数：swing，linea
r）

callback：动画完成之后要执行的函数；

queue：是否放置在效果队列中，是布尔值，为false则立即开始

specialEasing:styles参数的一个或多个属性映射及对应的easing函数。

}

$(myElement).animate({
       left: 500,
       top: 200
}, {<br><br>　　　　duration:'3000',
       specialEasing: {
            left: 'swing',
            top: 'linear'
        }
});

4.原生js动画

需要了解一些普遍的动画计算方法，然后理解编写。