Jittery animation when using transition with padding/height

Question

Having some issues with a sub-radio animation feature I'm working on. I have the code working, but there is some jitters in the animation due to the max-height not working as intended with the CSS3 transition.

The code is below, and you can see for yourself as to what I'm describing. Anyway I can soften the easing in of the animation?

 $(function() { /*-- Display/Remove secondary radio selection if the second option is checked/unchecked --*/ $('input[type="radio"]').click(function() { if ($('#selection2').is(':checked')) { window.setTimeout(function(){ $('#subsection1').addClass('display-subsection'); }, 200); } /*-- If radio is not selected anymore, remove sub-sections checked also --*/ if ($('#selection2').is(":not(:checked)")) { $('input[name=request-subsection1]').removeAttr('checked'); $('#subsection1').removeClass('display-subsection'); } }); /*-- Display/Remove another secondary radio selection if the third option is checked/unchecked --*/ $('input[type="radio"]').click(function() { if ($('#selection3').is(':checked')) { window.setTimeout(function(){ $('#subsection2').addClass('display-subsection'); }, 200); } /*-- If radio is not selected anymore, remove sub-sections checked also --*/ if ($('#selection3').is(":not(:checked)")) { $('input[name=request-subsection2]').removeAttr('checked'); $('#subsection2').removeClass('display-subsection'); } }); }); 

 /* ==================== Styling ==================== */ /*-- Boilerplate CSS --*/ .__hero-container { position: relative; } .container { background-color: #dadada; padding-top: 5%; padding-bottom: 5%; } label { display: block; } label:hover { cursor: pointer; } /*-- Custom Contact form --*/ #custom-subforms { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .hidden-subsection { clear: both; opacity: 0; max-height: 0; overflow: hidden; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .display-subsection { opacity: 1; max-height: 100%; padding-top: 30px; } /*-- Replace radio buttons --*/ input[type="radio"] { display: none; } input[type="radio"] + label span { display: block; width: 20px; height: 20px; margin: 0 auto; vertical-align:middle; background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png) -38px top no-repeat; cursor:pointer; } input[type="radio"]:checked + label span { background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png) -57px top no-repeat; } /* ==================== Breakpoints ==================== */ @media only screen and (max-width : 480px) { .container { padding-left: 0px; padding-right: 0px; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <div class="__hero-container"> <div class="container" id="custom-subforms"> <form> <div class="col-md-12 text-center"> <div class="col-md-4 col-sm-4 col-xs-4"> <input type="radio" id="selection1" name="request"> <label for="selection1"><span></span>Selection 1</label> </div> <div class="col-md-4 col-sm-4 col-xs-4"> <input type="radio" id="selection2" name="request"> <label for="selection2"><span></span>Selection 2</label> </div> <div class="col-md-4 col-sm-4 col-xs-4"> <input type="radio" id="selection3" name="request"> <label for="selection3"><span></span>Selection 3</label> </div> <div class="hidden-subsection" id="subsection1"> <div class="col-md-6 col-sm-6 col-xs-6"> <input type="radio" id="selection4" name="request-subsection1"> <label for="selection4"><span></span>Selection 4</label> </div> <div class="col-md-6 col-sm-6 col-xs-6"> <input type="radio" id="selection5" name="request-subsection1"> <label for="selection5"><span></span>Selection 5</label> </div> </div> <div class="hidden-subsection" id="subsection2"> <div class="col-md-6 col-sm-6 col-xs-6"> <input type="radio" id="selection6" name="request-subsection2"> <label for="selection6"><span></span>Selection 6</label> </div> <div class="col-md-6 col-sm-6 col-xs-6"> <input type="radio" id="selection7" name="request-subsection2"> <label for="selection7"><span></span>Selection 7</label> </div> </div> </div> </form> </div> </div> 

JSFIDDLE VERSION

Answer 1

Adding a min-height and max-height fixed it for me

.display-subsection {
  opacity: 1;
  min-height: 10px;
  max-height: 100px; 
}