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

Posted 2020-06-13

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:指定动画循环执行次数

重点动画：鱼眼效果。鼠标放在文字上面的时候，文字放大