css 过渡和 变形

一、过渡（transition）

transition-property: 指定具有过渡效果的CSS样式属性名
1.默认值： all
2.仅具有中间值（CSS样式值是数值的）的CSS样式具有过渡效果
3.可以具体指定那些样式具有过渡效果，多个CSS样式属性名使用 ， 分割

transition-duration: 设置过渡持续的时间
1. s 或者 ms 必须是正值
2. 默认值 0s

transition-delay: 设置过渡的延迟执行时间
1. 默认值 0s
2. 如果是正值，表示在延迟指定的时间后执行过渡效果
3. 如果是负值，表示立即达到指定之间过渡的结果后再执行过渡。

transition-timing-function: 三次贝塞尔曲线函数

控制过的效果（CSS值得变换速度）

默认值：
ease: 慢进慢出
linear: 匀速

简写：
transition: CSS样式属性名 过渡时间 过渡效果 过渡延迟时间 （CSS样式属性名 过渡时间 过渡延迟时间 过渡效果 ）

注意事项：
样式覆盖问题

1.如果后面的样式 持续时间+延迟时间 大于0，后面的样式覆盖前面的。
2.如果后面的样式 持续时间+延迟时间 等于0

Chrome 57 以下
-- 前面的样式生效

Chrome 58 以上
-- 后面的样式覆盖前面的。

3.如果后面的样式 持续时间+延迟时间 小于0，前面的样式生效

二、变形（transform）

变形函数的特点
1、只有非inline元素才能设置变形。
2、内容和后代元素同步变形
3、不会对兄弟元素的位置产生影响。
4、不会造成父元素大小的改变。

1.缩放
scale(x, y)
scaleX(length)
scaleY(length)
2.倾斜，斜切
skew(x, y)
skewX(angle)
skewY(angle)
3.位移
translate(x, y);
translateX(length);
translateY(length);
4.旋转
rotate(angle)

变形的中心点
transform-origin: x y

函数综合使用
-- 第一个函数的坐标系改变（放大，倾斜，旋转，位移）会影响后续的函数