”过渡“transition

功能：在规定的时间内，从一个值变化到另一个值的过程

**transition-property:**过渡的属性

**transition-duration:**过度的时间

**transition(**缩写)

例：transition: all linear 2000ms;

可以过渡的属性：颜色、尺寸、透明度

进行尺寸过渡时起始值和结束值不能auto

过渡效果延迟显示（transition-delay:时间;）

transition-delay: 0.5s;

transition-timing-function（过渡速度）

linear:匀速过度

ease-in:由慢到快

ease-out:由快到慢

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

动画

动画定义（@keyframes 自定义）

第一步定义动画

书写格式：@keyframes动画名称（动画效果）

动画效果：百分率{声明块}（注：百分率是声明块动画的时间）

第一条是动画的起始效果

最后一条是动画的结束效果

第一条和最后一条相同时课省略最后一条

第二部运用动画

书写格式：

animation：动画名称 动画时间 动画播放次数;

变形（transform）

可以通过改变盒子的视觉效果

变形不会改变盒子原本的位置

旋转（rotate）

默认情况下z轴旋转

书写格式：transform:rotate: (角度);

​ transform: rotateX(100deg);

​ transform: rotatey(80deg);

注：角度给正顺时针旋转，角度给负逆时针旋转

缩放 scale

书写格式：transform: scale(2);

取值：

大于1是放大，小于1是缩小

倾斜skew

书写格式：transform:skew(角度);

偏移量 translate

书写格式：transform:translate(x轴偏移量 y轴偏移量);

多个变化效果生效

transform:旋转 缩放 倾斜;

建议：放大某个元素时，给父元素添加overflow:hidden;

避免由于放大遮挡相邻元素的内容