CSS transition not with overflow [closed]

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

Want to improve this question? As written, this question is lacking some of the information it needs to be answered. If the author adds details in comments, consider editing them into the question. Once there's sufficient detail to answer, vote to reopen the question.

Closed 9 years ago.

Improve this question

I have got simple div with this css attached to it

.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 part is working it shows overflow,but it works promptly.

what is the question???

Vincent Rodomista
– Vincent Rodomista

2016-07-27 16:53:32 +00:00
Commented Jul 27, 2016 at 16:53 — Vincent Rodomista
– Vincent Rodomista, Commented Jul 27, 2016 at 16:53
@VincentRodomista more of a problem.Transition not working

COp
– COp

2016-07-27 16:53:59 +00:00
Commented Jul 27, 2016 at 16:53 — COp
– COp, Commented Jul 27, 2016 at 16:53

Ethan Mott · Accepted Answer · 2016-07-27 16:57:35Z

1

"overflow" is not a animatable property.

Here is a list of animatable properties:

CSS animated properties

answered Jul 27, 2016 at 16:57

Ethan Mott

1874 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

COp Over a year ago

Oh okay thanks!But to you know how can i animate it like facebook does?

Ethan Mott Over a year ago

Which feature of Facebook are you referring to?

COp Over a year ago

In chats when you hover the left div it nanimates the scroller

Ethan Mott Over a year ago

They are not using the default scrollbars that appear when using the CSS "overflow" property. It looks like they're using a custom scrollbar that animates itself appearing/disappearing by using the "opacity" property.

COp Over a year ago

Okay Thanks!I'll see what i can do

Vincent Rodomista · Accepted Answer · 2016-07-27 16:57:19Z

0

It actually is not possible to transition the overflow property. This code works fine with qualities such as background: red etc.

edited Jul 27, 2016 at 16:57

answered Jul 27, 2016 at 16:55

Vincent Rodomista

7705 silver badges22 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:24:50Z

0

There's no option to make a transition on overflow property.

For a more detailed answer, please read this answer: https://stackoverflow.com/a/27905043/1860540

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Jul 27, 2016 at 16:59

Eliya Cohen

11.6k14 gold badges78 silver badges127 bronze badges

Comments

lokesh-coder · Accepted Answer · 2016-07-27 17:29:04Z

Try this,

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

and,

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

The idea is, create a wrapper and we will animate it by giving extra 20px padding on hover for scrollbar. So that it does not wrap inner text.

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

Thanks!

Collectives™ on Stack Overflow

CSS transition not with overflow [closed]

4 Answers 4

5 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Linked

Related