隐藏

css3中transition hover中的书写顺序差异

发布:2014/12/24 13:26:27作者:管理员 来源:本站 浏览次数:1521

你是不是不知道在CSS样式中该把transition写在hover中呢,还是写在普通状态里?

好,我们来看个示例:

代码如下:

html:

<button class="btn" id="btn1">demo1</button>
<button class="btn" id="btn2">demo2</button>

CSS

body { margin:20px; }
.btn { height:24px; width:60px; color:#fff; background:#333; font-size:16px;  border:0 none;

border-radius:3px; }
#btn1 {  }
#btn1:hover { color:#333; background:#eee; -webkit-transition:all 3s linear 0.5s;/*属性,持

续时间,动画方式,延迟时间*/ }
#btn2 { -webkit-transition:all 3s linear 0.5s;/*属性,持续时间,动画方式,延迟时间*/  }
#btn2:hover { color:#333; background:#eee; }

运行结果:

•从普通状态到悬浮状态时,两者效果一致,即normal->hover顺向动画过渡
•从悬浮到移开状态时,写在hover中的transition效果是一种切换(normal->hover顺向动画过 渡,hover->normal 逆向动画过渡),但是写在普通状态中的transition迅速消失,没有丝毫的delay,也就是说,从hover->normal没有任何过 渡。