码迷,mamicode.com
首页 > Web开发 > 详细

第四节 css3动画之transition

时间:2020-03-14 17:07:36      阅读:76      评论:0      收藏:0      [点我收藏+]

标签:0ms   动画   pre   过渡   idt   --   set   这一   har   

 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>

 

第四节 css3动画之transition

标签:0ms   动画   pre   过渡   idt   --   set   这一   har   

原文地址:https://www.cnblogs.com/kogmaw/p/12492433.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!