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>