关于css3 transition的问题：transition该放在哪？

浏览数：17 / 时间：2015年06月09日

css的transition允许css的属性值在指定时间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并平滑地以动画效果逐渐改变CSS的属性值。

一般我们使用hover来改变css值

在书写的时候，可能初学者会产生疑惑，不清楚transition是写在普通状态的元素上，还是写在元素的hover状态上，为了清晰直观描述，这里举个栗子，只写关键部分

html：

<div class="demo1">transition放在normal状态</div>
<div class="demo2">transition放在hover状态</div>

css：

div{width:100px;height:100px;background:#333;color:#fff;margin:20px}
.demo1{
    -webkit-transition:all 1s ease;
    -moz-transition:all 1s ease;
    -ms-transition:all 1s ease;
    -o-transition:all 1s ease;
    transition:all 1s ease;
}
.demo1:hover{
    background:#ccc;
    color:#333;
    width:200px;
}
.demo2{
    
}
.demo2:hover{
    background:#ccc;
    color:#333;
    width:200px;
    -webkit-transition:all 1s ease;
    -moz-transition:all 1s ease;
    -ms-transition:all 1s ease;
    -o-transition:all 1s ease;
    transition:all 1s ease;
}

通过demo可以看到，实际上过渡状态分为两部分，顺向和逆向，即mouseenter和mouseleave产生的动效；当transition放到元素的hover状态时，只会产生顺向的过度动画

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style 使用 log html 问题 si it la class style 使用 log html 问题 si it la

相关文章

随机文章

您可能还喜欢

您可能还喜欢