CSS动画与jQuery动画

1、transform（描述了元素的静态样式）

transform允许对元素进行旋转（rotate）、缩放（scale）、移动（translate）、倾斜（skew）

2、transition（过渡，能实现动画效果）

transition一般会搭配hover等鼠标事件使用，即在原始样式selector中定义transition属性，在selector:hover样式中定义要发生变化的属性的值（如：width等）

语法为：transition:property duration timing-function delay，其中：property规定设置过渡效果的css属性的名称，duration规定完成过渡效果需要的时间，timing-function规定过渡效果的速度曲线，delay规定过渡效果的延迟时间

3、animation（动画，能实现动画效果）

animation需要与@keyframes keyframe{from{} to{}}配合使用，即在原始样式中定义animation属性，在@keyframes keyframe中定义动画的时间点

语法为：animation:name duration timing-function delay iteration-count direction，其中name规定需要绑定到选择器的keyname名称，duration规定完成动画需要的时间，timing-function规定动画效果的速度曲线，delay规定动画的延迟时间，iteration-count规定动画的播放次数，direction规定是否应该轮流反向播放动画

4、jQuery中的animate()方法

$(selector).animate({styles},speed,easing,callback);

其中：styles（必选，规定产生动画效果的一个或多个css属性/值），speed（可选，规定动画的速度，可以使用毫秒值、slow、fast），easing（可选，规定在动画的不同点中元素的速度，可以使用swing、linear），callback（可选，animate函数执行完后要执行的函数）

$(selector).animate({styles},{options});

其中：styles（必选，规定产生动画的一个或多个css属性/值），options（可选）包括：speed、easing、callback、step、queue、specialEasing