H5C3--过渡transition

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             width: 200px;
 9             height: 200px;
10             background-color: red;
11             position: absolute;
12             left: 50px;
13             top: 50px;
14             /*过渡：过渡有延迟，有值的变化才能有过渡*/
15            /*
16             transition-property: 需要添加过渡效果的样式属性名称;  --必需
17             transition-duration: 过渡效果完成所需要的时长，以s为单位;  -- 必需
18             transition-delay: 延迟多少s后开始过渡 ;  -- 0
19             transition-timing-function:  过渡效果的时间函数--速度曲线;  --ease-in-out
20 
21             */
22             /*transition-property: left;
23             transition-duration: 1s;
24             transition-delay: 1s;
25             transition-timing-function: linear;*/
26 
27             /*transition-property: left,background-color;*/
28             /*transition-duration:  1s,10s;*/
29 
30             /*简写方式*/
31             /*transition: property duration delay timing-function;*/
32             /*transition: left 1s 1s linear , background-color 1s;*/
33 
34 
35             /*all 对所有属性都会运用过渡效果
36             1.遍历当前元素的所有可能的样式属性
37             2.降低效率
38             */
39             transition: all 1s 1s linear;
40         }
41         div:active{
42             left: 500px;
43             width: 400px;
44             background-color: #ceffbb;
45         }
46     </style>
47 </head>
48 <body>
49      <div></div>
50 </body>
51 </html>