transform & transition @year12

/*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、函数综合使用 : 前一个函数得坐标系，会影响后续函数得坐标系。
 */