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>
原文：https://www.cnblogs.com/yuanxiangguang/p/11321255.html