html display失效,CSS3 中 transition-duration 对 display: none/block 属性无效？

代码如下面所示，我用 transition-duration 对 display: none/block 属性和 width 属性进行2秒慢动作切换。但是，实际展示的时候，width 变换确实用了2秒，但display并没有，请问这是为什么呢？

HTML

CSS.transition-example {

width: 40px;

height: 40px;

background: red;

margin: 30px;

color: #FFF;

font-size: 20px;

}

#width-duration, .box {

-webkit-transition-duration: 2s;

-moz-transition-duration: 2s;

-o-transition-duration: 2s;

transition-duration: 2s;

}

#width-duration:hover {

width: 80px;

}

.box {

display: none;

}

#width-duration:hover .box { display: block; }

html display失效,CSS3 中 transition-duration 对 display: none/block 属性无效？相关推荐

css3中transition过渡和animation动画的区别
css3中transition过渡和animation动画的区别 animation 多两个参数,循环和动画的方式 transition不能自行触发,通过hover等动作或结合JS进行触发.anmia ...
CSS3中背景的四个新的属性
本文对CSS3中背景的四个新的属性进行了详细介绍. 多重背景图片 Css3中,对一个元素可以使用一张以上的背景图片.除了使用逗号将图片分开以外,其代码与css2相同.第一个声明的图片定位在元素的顶部, ...
css3中transition和display的坑
不知道大家做css3动画的时候遇到过这种情景没? 用opacity实现淡入淡出的效果.噢!good!一切正常给个栗子: <!DOCTYPE html> <html> < ...
css3中transition属性详解
transform呈现的是一种变形结果,而Transation呈现的是一种过渡,通俗点说就是一种动画转换过程,如渐显.渐弱.动画快慢等.transition和transform是两种不同的动画模型. ...
css中变形,css3中变形处理
transfrom功能在css3 中可以使用transfrom功能实现文字或图像的旋转,缩放,倾斜,移动等变形处理 deg是css3中使用的一种角度单位. 旋转: 使用rotate方法,在参数中加入 ...
项目总结(css3中的阴影效果)
以前用的很少,没有仔细去了解过这一块,所以对于阴影和动画只是实现一些简单的需求.所以趁这次项目需求结合实践就去好好总结一下这一块. css3中的阴影效果: css3中的box-shadow 请看box ...
[css] CSS3中的transition是否可以过渡opacity和display？
[css] CSS3中的transition是否可以过渡opacity和display? transition过渡display是有一个前提条件: 浏览器渲染是在每一帧的最后,每一帧都会执行以下操作: ...
浅谈CSS3中display属性的Flex布局，关于登陆页面属性框的设置
声明:本文转发自三里屯柯南的浅谈CSS3中display属性的Flex布局http://www.cnblogs.com/xuyuntao/articles/6391728.html 基本概念采用Fl ...
html中transition默认,CSS3中的Transition详解
W3C标准中对css3的transition这是样描述的:"css的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改 ...

html display失效,CSS3 中 transition-duration 对 display: none/block 属性无效？

html display失效,CSS3 中 transition-duration 对 display: none/block 属性无效？相关推荐

最新文章

热门文章