过渡 (transition)通过过渡可以指定一个属性发生变化时的的切换方式，通过过渡效果可以创建一些非常好的效果，提升用户的体验。

过渡的属性：

transition-property: 指定要执行过渡的属性，多个属性间用逗号隔开，如果所有属性都需要过渡可以使用all，大部分属性都支持过渡。 注意：过渡必须是一个有效数值像 auto不是有效数值

transition-duration: 指定过渡效果的持续时间，时间单位 s和ms。

transition-timing-function:过渡的时序函数 是指定过渡的执行的方式 默认值 ： ease 慢速开始 先加速后减速 linear 匀速运动 ease-in 加速运动 ease-out 减速运动 ease-in-out 先加速后减速 cubic-bezier() 贝塞尔曲线，可以在https://cubic-bezier.com绘制需要的贝塞尔曲线 steps()分步执行过渡效果

transition-delay 过渡效果的延迟，等待一段时间后再执行过渡

注意：transition 可以同时设置过渡相关的所有属性，只有一个要求 如果要写延迟，第一个时间时持续时间，第二个是延迟。

动画（animation），动画和过渡类似，不同的是过渡需要在某个属性发生变化时才会触发，动画可以自动触发动态效果。

设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行的每一个步骤。通过@keyframes 动画的名称{}设置动画执行的整体步骤。

动画的属性：

animation-fill-mode: 动画的填充模式

可选值： none 默认值 动画执行完毕 元素回到初始位置 forwards 动画执行完毕 元素会停止在动画结束位置 backwords 动画延时等待时 元素就会处于开始位置 both 结合了forwards和backwards

变形就是指通过css来改变元素的形状和位置，变形不会影响到页面的布局，可以通过transform来设置元素的变形效果。

平移 translateX() 沿着x轴方向平移 translateY() 沿着y轴方向平移 translateZ() 沿着z轴方向平移 平移元素,百分比是相对于自身计算的

注意：多个变形用空格隔开，下面再定义transformX会让上方的transformY失效，可以利用以下方式进行元素居中

Z轴平移 z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼的距离，距离越大，元素离我们人越近。

z轴平移属于立体效果，默认情况下网页是不支持透视的，如果需要看见效果必须要设置网页的视距。

通过旋转可以使元素沿着x y 或 z旋转指定的角度 rotateX() 元素沿着X轴旋转 rotateY() 元素沿着Y轴旋转 rotateZ() 元素沿着Z轴旋转 可与选用的单位由 deg（°） turn（圈）

通过scale（）可以对元素进行缩放

css中可以通过transform-origin设置变形的原点 默认值是center

同理我们可以自己更改想要的变形原点