前端css3：如何通过css3实现当元素高度发生变化时，有渐变的效果

1.通过transition实现：

定义和用法

transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property
transition-duration
transition-timing-function
transition-delay
注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

<div class="test">

</div>
.class{
    width:200px;
    height:300px;
    border:1px solid red;
    transition:height 2s;
    -moz-transition:height 2s; /* Firefox 4 */
    -webkit-transition:height 2s; /* Safari and Chrome */
    -o-transition:height 2s; /* Opera */
}
.class:hover{
    height:500px;
}
复制代码

转载于:https://juejin.im/post/5cc42a13518825253e396885