1. 先实现一个简单的过渡效果吧！
<body> <div>hover to move</div> </body>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
transition: background-color 1s, height 1s 1s;
}
div:hover {
background-color: skyblue;
height: 200px;
}
</style>
2. 简单介绍
transition: 用来做过渡效果，有四个属性
1. transition-property 需要过渡的属性，可以指定为none或all，即全不过渡和全部过渡
2. transition-duration 过渡时间
3. transition-delay 延迟多长时间执行
4. transition-timing-function 过渡变化状态
* linear 匀速
* ease-in 加速
* ease-out 减速
* cubic-bezier 自定义
transition的缺点：
1. 只能通过事件触发
2. 只能执行一次，除非多次触发
3. 只考虑开始和结束状态，中间状态无法设置