Animate the overflow property

Question

I need to animate height, and set overflow: hidden for the first keyframe, and overflow: visible (and keep it) for the last one.

I'm trying this, but at the end, overflow is still hidden.

How can I solve this issue?

The 2 includes are merely SCSS polifill mixins.

@include keyframes(open) {
  0% {
    height: 0;
    overflow: hidden;
  }
  100% {
    height: $main_menu_height;
    overflow: visible;
  }
}


#main-menu-box {
    overflow: hidden;
    height: 0;

    &.opened{
       @include animation('open 200ms ease-out 0s 1 normal forwards');
    }
}

Answer 1

The overflow property can't be animated with CSS. See the W3 specs here : overflow properties

Animatable: no

You can also see a list of animatable properties on MDN : Animated properties

---

Workaround :

If you need to change the overflow property, you can use JS. Here is an example with the jQuery library.

The overflow property changes with a class toggle. It is fired when the div is clicked :

$('#w').click(function() {
  $(this).toggleClass('open');
});

#w {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  overflow: hidden;
}
#w.open {
  overflow: visible;
}
#w div {
  height: 200px;
  width: 50px;
  background: gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="w">
  <div></div>
</div>