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

Answer 1

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.

Answer 2

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 it to get the proper start / end values: https://bennettfeely.com/clippy/.

Answer 3

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.

Answer 4

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.

Answer 5

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