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

謝謝！