CSS过渡不会溢出

Question

我有简单的div使用该CSS连接到它

.users_to_c{ 
    height: 500px; 
    width:400px; 
    background:rgb(0, 0, 0); 
    background-image: url("../img/back.jpg"); 
    position: absolute; 
    border-bottom-left-radius: 5px; 
    border-top-left-radius: 5px; 
    overflow: hidden; 
    -webkit-transition: 5s; 
    -moz-transition: 5s; 
    -ms-transition: 5s; 
    -o-transition: 5s; 
    transition: 5s; 
    &:hover{ 
     overflow: auto; 
    } 
} 

哈弗部分工作它显示溢出，但它的作品及时。

Answer 1

“overflow”不是动画属性。

这里是动画的属性列表：

CSS animated properties

Answer 2

实际上不可能转换溢出属性。此代码适用于background: red等品质。

Answer 3

有没有选项，以使在overflow财产的过渡。

如需更详细的回答，请阅读这样的回答：https://stackoverflow.com/a/27905043/1860540

Answer 4

试试这个，

<div class="wrap"> 
    <div class="users_to_c"> 
    Lorem ipsum dolor sit amet, 
    </div> 
</div> 

，并

.wrap{ 
    height: 200px; 
    width:400px; 
    overflow: hidden; 
} 
.users_to_c{ 
    width:400px; 
    background:rgb(0, 0, 0); 
    background-image: url("../img/back.jpg"); 
    border-bottom-left-radius: 5px; 
    border-top-left-radius: 5px; 
    color:red; 
    padding: 20px; 
    box-sizing: border-box; 
} 

.wrap:hover{ 
     overflow-y: auto; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
    width: 420px; 
} 

的想法是，创建一个包装，我们将动画它通过为滚动条悬停提供额外的20px填充。所以它不包装内部文本。

http://jsbin.com/qivukeb/edit?html,css,output

谢谢！