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