笔记-CSS的过渡

什么是过渡：让一个元素，从一个状态变化到另一个状态的过程，展示到页面中。

transition:

​ 属性：

​         transition-property——适用范围：尺寸、颜色、透明度

​ 取值：
        一个、多个、全部（all）
        注：不支持display：none的淡入淡出效果

​ transition-timing-function

​ 取值：
        ease 默认匀速

        ​ease-in 由慢到快

​        ease-in-out 由慢到快再到慢

​        ease-out 由快到慢

​        linear 线性

​ transition-duration——定义过渡效果花费的时间

​ transition-delay——设置过渡的延迟效果

transform---变形：

scale—缩放：

​取值：

​        0-1是缩小，1以上是放大（不会影响布局，但是会覆盖）

​​        例:transform:scale(2)

skew—倾斜：

​ 取值（角度-Degree）：

​        正值：逆时针倾斜

​        负值：顺时针倾斜

​        例:transform:skew(30deg)

rotate—旋转：

​ 取值（角度-Degree）：

​        Z轴：默认值

​        正值：顺时针旋转

​        负值：逆时针旋转

​        例:transform:rotate(30deg)

translate—偏移量:

​ 取值：

​ ​        第一个值是x轴：正数往右，负数往左

​ ​        第二个值是y轴：正数往下，负数往上

​ ​        注：两个值之间的分隔符是逗号。

​ ​        注2：只要给小括号内多个值，分隔符都是逗号。

​ ​        例:transform:translate(100,100) 往右下走

transform-origin—设置原点的位置：

​ 取值：

​ ​        第一个值是x轴：正数往右，负数往左

​ ​        第二个值是y轴：正数往下，负数往上

​ ​        例：transform-origin:0 0；

​        或

​        transform-origin:top right;