- 我们知道hover这个伪类选择器（:hover）可以用在所有的标签上，所以可以用这个选择器来指定鼠标悬浮在元素上元素的变化情况（例如修改宽、 高），变化过程中的动画效果叫做过渡
- 注意：
（1）ul:hover li{width:100px}这个选择器的意思是当鼠标停留在ul时，将ul中的所有li标签的宽度改为100px
（2）ul li:hover{color:red}这个的意思是当鼠标悬停在ul的哪个li上，就将哪个li的宽度设为100px
过渡的三要素：
1.必须有属性发生变化
2.必须告诉系统哪个属性需要执行过渡效果
3.必须告诉系统过渡效果持续时长
格式：
transition-property: 需要过渡的属性；（可连写，用逗号隔开）
transition-duration: 过渡所需的时长；（可连写，用逗号隔开）
transition-delay: 等待多少秒才开始过渡；（可连写，用逗号隔开）
transition-timing-function:过渡过程中速度如何变化; （取值有linear（匀速），ease（逐渐慢下来），ease-in（加速），ease-out（减速），ease-in-out（先加速后减速），不过常用的有linear和ease-in-out）
举个栗子：
image.png
过渡连写格式
transition:过渡属性 过渡时长 运动速度 延迟时间
注：连写可以省略后面的两个参数，因为只要满足了过渡的三要素即可
如果有多个属性加逗号即可：transition:过渡属性 过渡时长 运动速度 延迟时间，过渡属性 过渡时长 运动速度 延迟时间，....
技巧：如果多个属性的运动速度，延迟时间，持续时间一样，那么可以简写为：transition：all 过渡时长
之前的经验：给span标签设置过渡模块
image.png
