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>
