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

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

I'm 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.