过渡
过渡（Transition）是 CSS3 提供的一种用于控制元素在状态改变时平滑过渡效果的机制。通过过渡，可以使元素的属性值在一定时间内从初始状态过渡到最终状态，实现动画效果。
笔记内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡</title>
<style>
/* 使用过渡控制 div 的宽高变化，CSS3 中的功能 */
div{
width: 100px;
height: 100px;
/* 分部设置过渡属性 */
transition-property: width; /* 规定使用过渡的 CSS 属性的名称，这里给 width 属性做动画 */
transition-duration: 0.3s; /* 定义过渡花费的时间，默认是 0，这里花费 0.3 秒（还可以用毫秒：ms）*/
transition-timing-function: linear; /* 规定过渡效果的时间曲线，默认是"ease"，值有 linear(匀速)/ease(逐渐慢下来)/ease-in(加速)/ease-out(减速)/ease-in-out(开始和结束时较慢，中间阶段较快) */
transition-delay: 0s; /* 规定过渡效果何时开始，默认是 0，这里是 0 秒，即立即开始 */
/* 一次性定义四个过渡属性(属性/花费的时间/时间曲线/何时开始)，如果有多组属性需要变化，用逗号隔开 */
transition: width 0.5s linear 0s,height 0.5s linear 0s;
transition: all 0.5s; /* all表示需要的属性(需要的属性写在可以写在hover中)都变化，最后两个参数可以省略(时间曲线/何时开始)*/
}
/* 鼠标放在 div 上面时，过渡效果展示 */
div:hover {
width: 300px;
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
</body>
</html>
