1 <!-- 一般用作活动专题网页制作，平常不太用 -->
2 <!-- transition-property 设置过渡的属性，例如：width height background-color
3 transition-duration 设置过渡时间，比如：1s 500ms
4 transition-timing-function 设置过渡运动的方式，常用有linear(匀速)|ease(缓冲运动)
5 transition-delay 设置动画延迟
6 transition:property duration timing-function delay 同时设置四个属性 -->
7 <!DOCTYPE html>
8 <html lang="en">
9 <head>
10 <meta charset="UTF-8">
11 <title>Document</title>
12 <style type="text/css">
13 .box{
14 width: 100px;
15 height: 100px;
16 background-color: gold;
17 /*transition: width 2s ease 0.5s;*/
18 /* 宽度单向运动 */
19 /*transition: width 2s ease,height 1s ease;*/
20 /* 宽高同时运动 */
21 /*transition: width 2s ease 0.5s,height 2s ease ;*/
22 /* 宽延时动，高不延时 */
23 transition: width 2s ease 0.5s,height 2s ease,background-color 2s ease 1s;
24 /* 先变宽高，最后变背景色 */
25 transition: all 2s ease 1s;
26 /* 多个属性同时做相同的动画，可以合并成这一句 */
27 }
28
29 .box:hover{
30 width: 600px;
31 height:600px;
32 background-color: red;
33 }
34 </style>
35 </head>
36 <body>
37 <div class="box"></div>
38 </body>
39 </html>
