Can I apply a CSS transition to the overflow property?

css css-transitions
Nikunj Madhogaria picture Nikunj Madhogaria · Jan 12, 2015 · Viewed 28.8k times · Source

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:

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

TylerH picture TylerH · Jan 12, 2015

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.

Related questions

Transitions on the CSS display property

I'm currently designing a CSS 'mega dropdown' menu - basically a regular CSS-only dropdown menu, but one that contains different types of content. At the moment, it appears that CSS 3 transitions don't apply to the 'display' property, i.e., you …

Read More
Using CSS for a fade-in effect on page load

Can CSS transitions be used to allow a text paragraph to fade-in on page load? I really like how it looked on http://dotmailapp.com/ and would love to use a similar effect using CSS. The domain has since been …

Read More
How can I transition height: 0; to height: auto; using CSS?

I am trying to make a <ul> slide down using CSS transitions. The <ul> starts off at height: 0;. On hover, the height is set to height:auto;. However, this is causing it to simply appear, not …

Read More