/*transition and transform*/ /*transition(过渡) */ /*  指定需要有过渡效果得CSS属性名*/     transition-property: width, height, background; /*  设定需要有过渡效果持续得时间（可以使用秒或毫秒）*/     transition-duration: 3s, 2s; /*  延迟执行*/     transition-delay: -1s, 1s; /*     默认0s,     正值表示延迟指定时间后开始执行过渡效果，     负值表示立即到达指定直接过度的结果后再执行过度。  */ /*  以相同的速度从开始到结束的过渡效果：三次贝塞尔曲线函数*/     transition-timing-function: linear; /*  ease  : 慢进慢出  | linear: 匀速  */ /*  过渡简写         transiton : css 属性名 过渡时间 延迟时间 过渡效果         transiton : css 属性名 过渡时间 过渡效果 延迟时间  */ /*  *  过渡效果覆盖  *  *  触发得条件 : 多个简写包含同一个css样式名  *  *  规则:  *      后面得简写得过渡样式 延迟时间 + 过渡时间 如果大于0 后面得覆盖前面得过渡效果。  *      后面得简写得过渡样式 延迟时间 + 过渡时间 如果等于0  *       [  *          v < Chrome 57 前面的样式生效  *          v > Chrome 58 后面的样式覆盖前面的样式  *       ]  *      后面得简写得过渡样式 延迟时间 + 过渡时间 如果小于0 执行前面得过渡效果。  *  */ /* * *  *   transform(变形)  *  *      位移函数       transform: translate(200px, 200px);  *      倾斜函数       transform: skewX(45deg);  *      缩放函数       transform: scale(2);  *      旋转函数       transform: rotate(2deg);  *      变形的中心点   transform-origin: left;  *      默认（50% 50%）基于元素的左上角计算的。  *  *      1、所有变形函数都不能作用于内联元素（inline元素）  *      2、文本内容&后代元素，会随之放大，不会导致兄弟元素位置发生改变，不会导致父元素大小发生改变。  *      3、函数综合使用 : 前一个函数得坐标系，会影响后续函数得坐标系。  */