前端笔记十三，变形与动画相关属性

transform

transform:设置变形；需添加浏览器前缀-o-;-webkit-;-moz-等；有如下变形函数
translate(tx [,ty]):组件横向上移tx，纵向上移ty距离
translateX(tx):组件横向上移动tx距离
translateY(ty):组件纵向上移动ty距离
scale(sx,sy):横向上缩放比例为sx，纵向上缩放比例为sy；sy省略情况下默认等于sx
scaleX(sx):只在横向上进行缩放，缩放比例为sx
scaleY(sy):只在纵向上进行缩放，缩放比例为sy
rotate(angle):组件顺时针转过angle角度
skew(sx[,sy]):设置组件沿X轴倾斜sx角度，沿Y轴倾斜sy角度，sy可省略，默认为0
skewX(sx):设置组件沿X轴倾斜sx角度
skewY(sy):设置组件沿Y轴倾斜sy角度
matrix(m11,m12,m21,m22,dx,dy):基于矩阵变换的函数，前四个参数将组成变形矩阵，dx,dy将负责对左边系统进行平移
transform-origin:设置变形的中心点，属性值指定为xCenter,yCenter,支持以下几种属性值：
　　left:指定旋转中心点位于组件的左边界，只指定给xCenter
　　top:指定旋转中心点位于组件的上边界，只指定给yCenter
　　right:指定旋转中心点位于组件的右边界，只指定给xCenter
　　bottom:指定旋转中心点位于组件的下边界，只指定给yCenter
　　center:指定旋转中心点位于组件的中间，如果将xCenter,yCenter都制定为center则旋转中心点为元素的中心
　　长度值：指定旋转中心点距离左边界，右边界的长度
　　百分比：指定旋转中心点位于横向，纵向上的百分比位置

transition
transition动画控制组件的某个属性发生改变时会经历一段时间，以平滑渐变的方式发生改变。包含以下4个部分
transition-property:指定元素的哪个属性进行平滑渐变处理，可以指定background-color,width,height等
transition-duration:指定平滑渐变的持续时间
transition-timing-function:指定渐变的速度，可选值
　　ease:开始慢后快再减慢，相当于cubic-bezier(0.25,0.1,0.25,1)
　　linear:匀速，相当于cubic-bezier(0,0,1,1)
　　ease-in:开始慢然后加快，相当于cubic-bezier(0.42,0,1,1)
　　ease-out:开始快然后减慢，相当于cubic-bezier(0,0,0.58,1)
　　ease-in-out:开始慢然后加快然后再减慢，相当于cubic-bezier(0.42,0,0.58,1)
　　cubic-bezier(x1,x2,y1,y2):通过贝济诶函数来控制动画的速度
transition-delay:指定延迟时间

Animation动画：提供了以下属性
animation-name:指定动画名称
animation-duration:指定动画持续时间
animation-timing-function:指定动画变化速度
animation-delay:指定动画延迟时间
animation-iteration-count:指定动画循环执行次数
重点动画：鱼眼效果。鼠标放在文字上面的时候，文字放大