title: How to make this div transition smoother (as CSS transitions don't seem to work)
body: <p>Here is the page in action, as you can see, my inputs fade nicely using jquery but no matter what I try I can't seem to get white div to shrink in a smooth manner as apposed to snapping: <a href="https://gyazo.com/983cc12230530459ea7c19c5484c53db" rel="nofollow noreferrer">https://gyazo.com/983cc12230530459ea7c19c5484c53db</a></p>
  
  <p>Code below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.logo-margins {
          margin: auto!important;
          margin-bottom: 20px!important;
          display: block!important;
          padding-left: 28px;
        }
      
        .copyright-text {
          font-size: 12px;
        }
      
        .step-one-object {
          display: block;
        }
      
        .step-two-object {
          display: none;
        }
      
        .center-box {
          background: #fbfbfb;
          transition: 2s;
          padding: 20px;
          border-radius: 15px;
        }
      
        .center-box2 {
          height: 302px!important;
        }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>     &lt;body style="background-color: #0155a4"&gt;
        &lt;div class="container"&gt;
         &lt;div class="col-md-12"&gt;
          &lt;img class="logo-margins" style="width:500px" src=“"&gt;
         &lt;/div&gt;
         &lt;div class="col-md-12"&gt;
          &lt;form class="form-signin" autocomplete="off"&gt;
           &lt;div class="center-box"&gt;
            &lt;div class="text-center mb-4 step-one-object"&gt;
             &lt;p&gt;&lt;br /&gt;Welcome to the Survey Centre. &lt;br /&gt;&lt;br /&gt; To get started, enter the 'Company ID' 
              issued to you by your local representative, You can also find this ID on the front page of any report created for you by representative&lt;/p&gt;
            &lt;/div&gt;
         
            &lt;div class="form-label-group"&gt;
             &lt;input type="text" id="inputCompanyId" class="form-control" placeholder="Email address" required autofocus&gt;
             &lt;label for="inputCompanyId"&gt;Company ID&lt;/label&gt;
            &lt;/div&gt;
         
            &lt;div class="form-label-group step-two-object" id="passwordField"&gt;
             &lt;input type="password" id="inputPassword" class="form-control" placeholder="Password"&gt;
             &lt;label for="inputPassword"&gt;Password&lt;/label&gt;
            &lt;/div&gt;
         
            &lt;button class="btn btn-lg btn-primary btn-block step-one-object" onclick="advanceStep(event)"&gt;Continue&lt;/button&gt;
            &lt;button class="btn btn-lg btn-primary btn-block step-two-object"&gt;Sign In&lt;/button&gt;
            &lt;p class="mt-5 mb-3 text-muted text-center copyright-text"&gt;&amp;copy; Copyright 2018, Intellectual Property &lt;/p&gt;
           &lt;/div&gt;
          &lt;/form&gt;
         &lt;/div&gt;
        &lt;/div&gt;
      
        &lt;script&gt;
         function advanceStep(event) {
          event.preventDefault();
          $(".step-one-object").fadeOut(300);
          $(".step-two-object").delay(305).fadeIn(300);
          
         }
        &lt;/script&gt;
       &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The aim is to get the white box to shrink smoothly on click of the button while the elements inside also do their animations, ideally finishing at the same time, CSS transitions on the white div seem not to work (I think this is because the CSS on the box isn't actually changing, it's just reacting to the contents changing).</p>
  
  <p>Thanks in advance,
  Jake Wilcox</p>