Can I apply a CSS transition to the overflow property?

Question

I'm trying to set a transition-delay to the overflow property of body when a div is clicked by adding a class to the body as follows:

$("div").click(function(){
    $("body").addClass("no_overflow");
});

div{
  background:lime;
  height:2000px;
}
.no_overflow{  
 overflow:hidden;
}
body{  
  overflow:auto;
  transition: overflow 0 2s;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>I'm div</div>

However, this doesn't seem to work (there's no delay). Am I doing anything wrong here?

I know this can be achieved by using setTimeout function, but was wondering why can't this be achieved using css transitions? Are there any specific style properties to which css transitions can be applied?

It occurred to me that, as an alternative, you could transition the height rather than the overflow property to achieve roughly the same look. — TylerH
– TylerH, Commented Jan 13, 2015 at 20:54
@TylerH: Yes, that can be tried. But one must take care of browser's height in order to do this. Also, that won't crop the window in the same manner when overflow is hidden. Anyways, I ended up using setTimeout. ;) — Nikunj Madhogaria
– Nikunj Madhogaria, Commented Jan 14, 2015 at 9:06

TylerH · Accepted Answer · 2015-06-07 18:10:30Z

65

There are many properties that can't be transitioned. overflow is among them; the render engine has no idea how to transition between "hidden" and "shown", because those are binary options, not intervals. This is the same reason why you can't transition between display: none; and display: block; (for example): there are no in-between phases to use as transitions.

You can see a list of properties you can animate here on Mozilla Developer Network.

edited Jun 7, 2015 at 18:10

answered Jan 12, 2015 at 15:08

TylerH

21.3k84 gold badges84 silver badges121 bronze badges

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

2 Comments

Smithee Over a year ago

As far as I'm aware, the only exception to this is visibility, as you can only have visible, hidden, and collapse, meaning that there's no in-between, but it still respects animation steps; this works great for animating submenus.

TylerH Over a year ago

@Smithee I'm not sure what you're saying the visibility property is the only exception to. There are multiple (n > 1) properties that you can transition and multiple (n > 1) that you cannot transition.

Dmitry · Accepted Answer · 2016-12-19 11:25:53Z

51

You can simulate a delay with animation:

$("div").click(function() {
  $("body").addClass("no_overflow");
});

div {
  background: lime;
  height: 2000px;
}

.no_overflow {
  overflow: hidden;
  /* persist overflow value from animation */
  animation: 7s delay-overflow;
}

body {
  overflow: auto;
}

@keyframes delay-overflow {
  from { overflow: auto; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>I'm div</div>

You'll have to apply a separate animation to .body if you want a delay on removeClass, and also to take care that the two animations don't overlap or they'll cancel each other out.

answered Dec 19, 2016 at 11:25

Dmitry

9518 silver badges10 bronze badges

5 Comments

Florian Over a year ago

Great! I was looking for a way to hide the scrollbar on a modal-container until the fade-in transition of a modal was completed. Little hacky, but this did the trick.

benzkji Over a year ago

this is it! instead of saying "cannot be animated with a transition", show a working css only solution.

Olgierd Dzięcielski Over a year ago

Yes, this is the only correct answer. It works!

chupapee Over a year ago

what a magic...

physalis Oct 28 at 10:07

This of course works great when you have some classes already changing due to interaction, or the state of a button changes (so no JS needed) and you want to animate the overflow. Genius!

Evgeny Samsonov · Accepted Answer · 2015-01-12 15:09:27Z

8

overflow isn't CSS animatable property. You can see full list of animatable CSS properties there.

answered Jan 12, 2015 at 15:09

Evgeny Samsonov

2,7404 gold badges22 silver badges28 bronze badges

Comments

Moshe Jonathan Gordon Radian · Accepted Answer · 2021-05-17 07:07:12Z

5

In case someone is looking at the answer, like I was, for a way to animate the cropping of an element which requires overflowing - here is the solution that worked for me: the clip-path css property which is animatable and very versatile.

Here is a cool tool to play around with, in order to get the proper start / end values for an animation: https://bennettfeely.com/clippy/.

edited May 17, 2021 at 7:07

answered Feb 13, 2020 at 15:00

Moshe Jonathan Gordon Radian

1,3611 gold badge14 silver badges22 bronze badges

Comments

Olgierd Dzięcielski · Accepted Answer · 2021-11-09 12:18:39Z

Dmitry's answer should be the only accepted answer, as it is a pure CSS solution applying delay to "non-animatable" properties. However it's worth to mention, that the CSS rule applying animation should be "triggerable" each time when it is needed.

For instance, the following code does not work:

@keyframes show-overflow {
  from { overflow: hidden; }
}
.hideable, .overlay {
  font-size: 36px;
  height: 50px;
}
.hideable {
  transition: height 2s;
  overflow: visible;
  animation: show-overflow 2s;  /* this line should be in separate  "triggerable" CSS rule to work */
}
.hideable.hidden {
  height: 0;
  overflow: hidden;
}

<button onclick="document.getElementById('hideable').classList.toggle('hidden')">
  Clik HERE to hide/show the text below
</button>
<div id='hideable' class='hideable'>
  This is the text to hide and show.  
</div>
<div class='overlay'>
  This is overlaying text
</div>

But after moving the marked property to a separate CSS rule, everything works as expected:

@keyframes show-overflow {
  from { overflow: hidden; }
}
.hideable, .overlay {
  font-size: 36px;
  height: 50px;
}
.hideable {
  transition: height 2s;
  overflow: visible;
}
.hideable:not(.hidden) {
  animation: show-overflow 2s;  /* now this works! */
}
.hideable.hidden {
  height: 0;
  overflow: hidden;
}

<button onclick="document.getElementById('hideable').classList.toggle('hidden')">
  Clik HERE to hide/show the text below
</button>
<div id='hideable' class='hideable'>
  This is the text to hide and show.  
</div>
<div class='overlay'>
  This is overlaying text
</div>

OZZIE · Accepted Answer · 2016-11-16 10:03:02Z

1

It makes sense that you can't transition between binary attributes for example overflow: hidden; and overflow: visible but it would have been really nice if instead of "transitioning" then it would be like (in js pseudo code:

setTimeout("applyOverflowVisible()", transitionTime);

But of course you can do this yourself in JavaScript but then you are splitting the code between places and it can make it difficult to understand by someone else. I guess using things like React helps but even there I would want to avoid mixing css into the js.

answered Nov 16, 2016 at 10:03

OZZIE

7,47410 gold badges64 silver badges66 bronze badges

Collectives™ on Stack Overflow

Can I apply a CSS transition to the overflow property?

6 Answers 6

2 Comments

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related