过渡、动画与变形

过渡（transition）
通过过渡可以指定一个属性发生变化时的切换方式，通过过渡可以创建一些非常好的效果，提升用户的体验
transition-property: 指定要执行过渡的属性
transition-duration: 指定过渡效果的持续时间
transition-timing-function: 过渡的时序函数，指定过渡的执行的方式
transition-delay: 过渡效果的延迟，等待一段时间后在执行过渡
transition 可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟
动画（animation）
animation-name: 要对当前元素生效的关键帧的名字
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
变形（transform）
用来设置元素的变形效果
translateX() 沿着x轴方向平移
translateY() 沿着y轴方向平移
translateZ() 沿着z轴方向平移
perspective: 800px；设置当前网页的视距为800px，人眼距离网页的距离
transform:rotate(); 通过旋转可以使元素沿着x y 或 z旋转指定的角度rotateX()、rotateY()、rotateZ()
transform:scale()；对元素进行缩放的函数：scaleX() 水平方向缩放、scaleY() 垂直方向缩放、scale() 双方向的缩放