过渡transition

过渡的概念

过渡可以为一个元素在“不同状态之间”切换的时候定义不同的过渡效果。通过伪类去改变元素的效果

过渡属性transition

它是由过渡名称transition-property；过渡时间transition-duration；过渡的延迟时间transition-delay 过渡的方式transition-timing-function组成的。

拆分属性和默认值

* 过渡名称transition-property 要变化的属性名，默认是all所有的变化属性

* 过渡时间transition-duration，默认0s，时间单位使用s秒

* 过渡的延迟时间transition-delay，默认0s，时间单位使用s秒

* 过渡的方式transition-timing-function默认是ease，常用是linear匀速，其他方式可以通过贝塞尔曲线调整不同的形态

过渡的简写

transition过渡的简写值只有过渡时间和延迟时间同时出现是，它们必须是过渡时间在前，延迟时间在后，其他属性值都无顺序。

/* 可省              可省*/
transition: all 1s 2s ease;
/*最简，只有过渡时间*/
transition: 1s;

多组过渡的书写方式

需要注意的是使用多组过渡，延迟时间，一定是之前所有过渡的执行时间的累加

/*小案例，胶囊变色
/* 过渡  用1s过渡背景色   ，用1s 等一秒后过渡圆角 */
transition: 1s background-color,1s 1s border-radius;\

可过渡的样式属性

MDN手册里面常用的动画属性 developer.mozilla.org/zh-CN/docs/…

注意浏览器兼容性

常用的可过渡属性 * 尺寸类（宽度、高度）
* font文字渲染
* 内外间距
* 文本（颜色，修饰线）
* 边框
* 背景类
* 定位
* 透明度
* 阴影
* 变换类

变换transform

变换的概念

transform变换属性，为了变换属性以多种维度的改变元素样式，它为我们提供了，四个变换函数。通过函数的参数改变变换的值。

变换可以是一个或同时多个，变换的执行顺序，是从左向右逐一执行。

特性：

* 当元素使用了transform变换属性发生变换时。元素的基点（参照变换的点）是默认元素的中心点

* 不脱离文档流，只要是移动到了或者遮盖到了其他元素的位置，不会影响其他元素位置，从而导致布局错乱。出现遮盖，出现堆叠。

* 内联元素使用变换属性无效，除了img

* 在变换属性中使用百分比的值，针对的是自身的宽度和高度

位移函数

* transform: translateX(20px);x轴方向的平移，正值向右平移，负值向左平移
* transform: translateY(-30px);y轴方向的平移，正值向下平移，负值向上平移
* transform: translate(100px,50px);双方向均可以平移，第一个值x轴，第二个值y轴
* transform: translate(150px);如果只写一个值，默认是x轴平移

未知宽高元素在父级内水平垂直居中

            .box1 {
                width: 600px;
                height: 500px;
                background-color: yellow;
                /*父级用相对定位 */
                position: relative;
            }
            .box1 .box2{
                width: 200px;
                height: 230px;
                background-color: red;
                /*子级用绝对定位*/
                position: absolute;
                top: 50%;
                left: 50%;
                /*元素自身的中心点 位移*/
                transform: translate(-50%,-50%);
            }

旋转函数

rotate()可以让元素产生一个角度的旋转，当元素旋转的时候，旋转的基点是元素的中心点。使用角度单位deg。

* transform: rotate(-30deg);函数中在二维空间中默认指z轴，正值顺时针旋转，负值逆时针旋转
* transform: rotateX(-30deg);x轴（水平）旋转，正值向前扑，负值向右躺
* transform: rotateY(30deg);y轴（垂直）旋转

缩放函数

scale()让元素进行放大和缩小，使用比例，无需单位。

* 元素放大，参数比1大的数字
* transform: scaleX(2);x轴放大
* transform: scaleY(2);y轴放大
* transform: scale(1.2);x轴y轴都同时放大

* 元素缩小，参数比1小比0大的数字
* transform: scaleX(0.5);x轴缩小
* transform: scaleY(0.5);y轴缩小
* transform: scale(0.5);x轴和y轴同时缩小

* 元素缩小到消失，使用0值transform: scale(0);

* 翻转效果，使用负号可使元素发生镜面翻转
* transform: scaleX(-1);x轴镜面翻转
* transform: scaleY(-1);y轴镜面翻转
* transform: scale(-1);双方向镜面翻转\

扭曲

skew()扭曲使用的是角度值，可以为正值或者负值

* transform: skewX(-40deg);x轴的扭曲
* transform: skewY(-30deg);y轴的扭曲
* transform: skew(50deg,30deg);x轴和y轴一起扭曲
* transform: skew(50deg);如果只写一个值，默认为x轴扭曲\

多个函数一起使用

想用多个,需要将多个函数用空格链接的方法放在transform值的位置。

有先后顺序，从左向右执行

/* e.g. */
transform:rotate(10deg) scale(2) skew(50deg);

变换的基点位置

transform-origin，默认是center

可以使用关键词和百分比切换基点的位置。

案例：钟表指针，指针通过基点改变指针方向，当鼠标移入表盘，指针旋转一圈

            .biaopan {
                width: 200px;
                height: 200px;
                border: 5px solid black;
                margin: 0 auto;
                border-radius: 50%;
            }
            .zhizhen {
                width: 3px;
                height: 100px;
                background-color: red;
                margin: 0 auto;
                transition: 1s;
                /* 切换指针的基点 */
                transform-origin: bottom;
            }
            .biaopan:hover .zhizhen {
                transform: rotate(360deg);
            }

CSS3中transition与transform的用法