过度动画: 两个属性之间平稳的进行变化
transition-property : 设置发生过度动画的属性名
all(全都发生改变)
none(全都不)
逗号隔开多组发生变化的属性
transition-duraton :过度动画持续时间 数值+时间单位 s ms
发生过度动画的属性名和持续时间不能省略.
transition-delay:过渡时间的延迟时间 数值+时间单位 s ms
transition-timing-function: 发生过度动画的运动方式
linear(匀速) ease (逐渐慢下来) ease-in(加速) ease-in-out(先加速后减速)
贝塞尔曲线网址:http://cubic-bezier.com 自定义过度时间方式
2D变化:平移 倾斜 旋转 缩放
属性名:transform
属性值:
平移:translateX(数值+单位) 水平方向平移 属性值可以是负数
translateY(数值+单位) 垂直方向平移 属性值可以是负数
translate(x,y) x表示水平方向平移,y表示垂直方向平移 如果只有一个值,只代表水平方向平移.
倾斜: skewx(数值+deg) 水平方向倾斜 属性值可以是负的
skewy(数值+deg) 垂直方向倾斜
skew (x,y) X表示水平方向倾斜,Y表示垂直方向秦谢,如果只有一个值,只代表水平方向倾斜.
缩放: scale() 属性值: >1 表示比例放大 0-1之间缩小,等于0隐藏,等于1不变. (比例缩放,所以不能带单位)
scaleX 水平方向缩放
scaley 垂直方向缩放
scale(X,Y) x 表示水平方向缩放,y表示垂直方向缩放,如果只有只有个值,代表两个方向同时缩放.
旋转 rotateX 沿着X轴旋转 数值+deg
rotateY 沿着y轴旋转
rotate(deg) 沿着自身进行旋转
先后顺序不一样,展示效果也不一样
变形原点 transform-orign:x y; 可以是数值,也可以是方位词
