1.鼠标移动到div中背景颜色慢慢变化（1个属性的变化）
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- <style type="text/css">
- #block{
- 400px;
- height: 400px;
- background: blue;
- margin: 0 auto;
- transition: background 3s;
- }
- #block:hover{
- background: red;
- }
- </style>
- </head>
- <body>
- <div id="block"></div>
- </body>
- </html>
2.多个属性的变化
transition:属性 时间，属性 时间
3.过度模式
transition:属性 时间 模式
模式：
ease:缓慢开始，缓慢结束
linear:匀速
ease-in:缓慢开始
ease-out:缓慢结束
ease-in-out：缓慢开始，缓慢结束（和ease稍有区别）