C​S​S3​：​transition与visibility

一、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; }