CSS Übergang nicht mit Überlauf

Question

Ich habe mit diesem CSS einfach div bekam daran befestigten

.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; 
    } 
} 

Hover Teil funktioniert es Überlauf zeigt, aber es funktioniert sofort.

Answer 1

"Überlauf" ist keine animierbare Eigenschaft. Hier

ist eine Liste der animierbaren Eigenschaften:

CSS animated properties

Answer 2

Es ist tatsächlich nicht möglich, die Überlaufeigenschaft zu überführen. Dieser Code funktioniert gut mit Qualitäten wie background: red usw.

Answer 3

Es gibt keine Möglichkeit, einen Übergang auf overflow Eigenschaft zu machen.

Für eine ausführlichere Antwort, lesen Sie bitte diese Antwort: https://stackoverflow.com/a/27905043/1860540

Answer 4

die Sie interessieren,

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

und

.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; 
} 

Die Idee ist, einen Wrapper erstellen und wir werden animieren es durch zusätzliche 20px Polsterung bei Hover für Bildlaufleiste geben. Damit wird der innere Text nicht umgebrochen.

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

Dank!