1 <html lang="en">
 2 
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>过渡</title>
 8     <style>
 9         div {
10             width: 100px;
11             height: 100px;
12             background-color: azure;
13             /* 对谁做过渡动画,就把过渡属性写在谁身上 */
14             /* transition: width 0.5s ease 0s, height .3s ease-in 1s; */
15             /* transition: all 0.5s ease 0s */
16             transition: all 0.5s linear;
17         }
18         /* div:hover {
19             width: 400px;
20             height: 400px;
21         } */
22         
23         div:active {
24             /* transform: translate(100px, 200px); */
25             /* transform: translateX(100px); */
26             transform: translateY(100px);
27         }
28         /* 以自身宽度居中 */
29         
30         section {
31             width: 100px;
32             height: 100px;
33             background-color: purple;
34             position: absolute;
35             top: 50%;
36             left: 50%;
37             transform: translate(-50%, -50%);
38         }
39     </style>
40 </head>
41 
42 <body>
43     <!-- transition 过渡效果 -->
44     <!-- transition 要过渡的曲线 花费时间 运动曲线  何时开始 -->
45     <div>我要移动</div>
46     <section></section>
47 </body>
48 
49 </html>