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
网友评论