Nikunj Madhogaria Nikunj Madhogaria - 24 days ago 6
CSS Question

Can I apply a CSS transition to the overflow property?

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?

Answer

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.