码迷,mamicode.com
首页 > 其他好文 > 详细

C?S?S3?:?transition与visibility

时间:2014-08-05 15:19:49      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:style   os   io   strong   ar   cti   时间   line   

一、transition与visibility

transition主要包含四个属性值:执行变换的属性:transition-property,变换延续的时间:transition- duration,在延续时间段,变换的速率变化transition-timing-function,变换延迟时间transition- delay。下面分别来看这四个属性值

transition-property:

其中有个属性,visibility: 离散步骤,在0到1数字范围之内,0表示“隐藏”,1表示完全“显示”,如:visibility,于是,visibility应用transition等同于0~1之间的过渡效果。

(1)延时隐藏:

.image
{
  -webkit-transition:all 0.5s ease;
   -moz-transition:all 0.5s ease;
   -o-transition:all 0.5s ease;
   -ms-transition:all 0.5s ease;
  transition:all 0.5s ease;
   position:absolute;
   margin-top:20px;
   visibility:hidden;

}
.hover:hover .image{visibility:visible;}

 

(2)延时显示:

 .image-delay{   

   position:absolute;    
   margin-top:20px;   
   visibility:hidden; -webkit-transition-delay:0s; -moz-transition-delay:0s; -ms-transition-delay:0s; -o-transition-delay:0s; transition-delay:0s; } .hover-delay:hover .image-delay{ visibility:visible; -webkit-transition-delay:0.5s; -moz-transition-delay:0.5s; -ms-transition-delay:0.5s; -o-transition-delay:0.5s; transition-delay:0.5s; }


(3)淡入淡出效果:
.image-fadeout
{ 
-webkit-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-ms-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
position:absolute;
margin-top:20px;
visibility:hidden;
opacity:0;
} 
.hover-fadeout:hover .image-fadeout{ visibility:visible; opacity:1; }
 

C?S?S3?:?transition与visibility,布布扣,bubuko.com

C?S?S3?:?transition与visibility

标签:style   os   io   strong   ar   cti   时间   line   

原文地址:http://www.cnblogs.com/christal/p/3892117.html

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