过渡
- 通过过渡指定一个属性发生变化时的切换方式
- 通过过渡创建好的效果，提升用户体验
- transition-property:指定要执行过渡的属性
- 多个属性用 ，隔开
- 所有属性都过渡，使用all
- 过渡必须是从一个有效数值向另一个有效数值进行过渡
- transition-duration: 指定过渡持续时间
- transition-timing-function : 过渡的是时序函数
- ease 默认，慢速开始，先加速在减速
- linear 匀速运动
- ease-in 加速运动
- ease-out 减速运动
- ease-in-out 先加速后减速
- cubic-bezier() 指定时序函数
- steps() 分布执行过渡效果
- end, 在时间结束时执行过渡（默认值）
- start，在时间开始时执行过渡
- transition-delay:过渡效果延迟，等待一段时间后在执行过渡
- transition 若要写延迟，则两个时间中第一个时持续时间
- transition: property duration timing-function delay;
- transform 用来设置元素变形效果 平移元素百分比相对自身计算
- translateX()
- translateY()
- translateZ(300px)
- rotateX()
- rotateY(19deg)
- rotateZ(.25turn)
- scaleX() 水平方向缩放
- scaleY() 垂直方向缩放
- scale() 双方向的缩放
- perspective： 300px 眼睛距离网页的距离
- z轴，调整元素和人眼的距离
- z轴平移属于立体效果（近大远小），默认不支持透视，若要看见效果必须设置网页视距
- 是否显示元素背面 backface-visibility: ;
动画
- animation-name:关键帧名字
- @kayframes name{from{ }to{ }}
- animation-duration 动画执行时间
- animation-delay 动画延时
- animation-iteration-count 动画执行的次数
- 次数值 infinite （无限循环）
- animation-direction 动画运动方向
- normal 默 从from向to运行，每次都这样
- reverse 从to向from运行，每次都这样
- alternate 从from向to运行，重复执行动画是反向执行
- alternate-reverse 从to向from运行 重复执行动画时反向执行
- animation-play-state 设置动画的执行状态
- running 默认值
- paused 动画暂停
- animation-fill-mode 动画的填充模式
- none 默 动画执行完元素回到原来位置
- forwards 动画执行完停止在动画结束的位置
- backwards 动画延时等待时，元素会处于开始位置
- both 结合了forwards 和backwards