过渡（transition）
1.transition
-通过过渡可以指定一个属性发生变化时的切换效果，通过过渡可以创建一些好的效果，提升用户体验。
-可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则俩个时间中第一个是持续时间，第二个是延迟时间。
2.transition-property（指定要执行过渡的属性）
-多个属性间用“,”隔开。
-如果是全部属性，使用all关键字。
-大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡。
3.transition-duration（指定过渡效果的持续时间）
-时间单位：s 和 ms 1s=1000ms
-可以分别指定时间
- transition-property: width, height;
- transition-duration: 1s, 2s;
4.transition-timing-function（过渡的时序函数）
-可选值：
-ease 默认值，先加速，再减速
-linear 匀速运动
-ease-in 加速运动
-ease-out 减速运动
-ease-in-out 先加速后减速
-cubic-bezier() 来指定时序函数（https://cubic-bezier.com）
-steps()分布执行过渡效果
-第一个值：执行几步
-第二个值：
-end 在时间结束时执行过渡（默认值）
-start 在时间开始时执行过渡
5.transition-delay（过渡效果的延迟，等待一段时间后在执行）
动画（animation）
1.动画个过渡类似，都是可以实现一些动态效果。不同的是过渡需要在某个属性发生变化时才会触发，动画可以自动触发动态效果。
2.设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤。
@keyframes test {
/*from表示动画的开始位置 也可以使用0%表示*/
from {
margin-left: 0;
}
/*to动画的结束位置*/
to {
margin-left: 700px;
}
}
3.animation-name（要对当前元素生效的关键帧的名字）
4.animation-duration（效果时间）
5.animation-delay（延时）
6.animation-timing-function（时序函数）
7.animation-iteration-count（动画执行的次数）
-可选值：
-次数
-infinite 无限执行
8.animation-direction（指定动画运行的方向）
-可选值：
-normal（默认值）从from向to运行，每次都是这样
-reverse 从to向from运行，每次都是这样
-alternate 从from向to运行，重复执行动画时反向执行
-alternate-reverse 从to向from运行，重复执行动画时反向执行
9.animation-play-state（设置动画的执行状态）
-可选值：
-running（默认值）动画执行
-paused 动画暂停
10.animation-fill-mode 动画的填充模式
-可选值：
-none（默认值）动画执行完毕元素，回到原来位置
-forwards 动画完毕元素时，停止在动画结束的位置
-backwards 动画延时等待时，元素就会处于开始位置
-both 结合了 forwards 和 backwards
11.animation（简写属性）效果持续时间在前，延迟时间在后，其它无所谓。
学识浅薄，如有错误，恳请斧正，在下不胜感激。