title: Animation or Transition Properties with Flexbox
body: <p>I am trying to get flexbox properties to work with transitions.  Right now, the elements snap into place.  I need them to transition smoothly on hover.  I have tried several things, but nothing seems to work.  I need something that has good cross-browser compatibility and displays well.  </p>
  
  <p>Where am I going wrong with this code?</p>
  
  <pre><code>HTML
              &lt;!--TOP--&gt;
                  &lt;div class="wrap"&gt;
                      &lt;section class="secLI"&gt;
                          &lt;a href="index.html" class="li4"&gt;
                            &lt;h3&gt;Home&lt;/h3&gt; 
                          &lt;/a&gt;
                      &lt;/section&gt;
                      &lt;section class="secLI"&gt;
                          &lt;a href="services/services.html" class="li5"&gt;
                            &lt;h3&gt;Services&lt;/h3&gt;
                          &lt;/a&gt;
                      &lt;/section&gt;
                      &lt;section class="secLI"&gt;
                          &lt;a href="events/events.html" class="li6"&gt;
                            &lt;h3&gt;Events&lt;/h3&gt;
                          &lt;/a&gt;
                      &lt;/section&gt;
                    &lt;/div&gt;
  
                &lt;!--BOTTOM--&gt;
                    &lt;div class="wrap"&gt;
                        &lt;section class="secLI"&gt;
                          &lt;a href="plan/plan.html" class="li4"&gt;
                            &lt;h3&gt;Plan an Event&lt;/h3&gt; 
                          &lt;/a&gt;
                      &lt;/section&gt;
                      &lt;section class="secLI"&gt;
                          &lt;a href="bands/bands.html" class="li5"&gt;
                            &lt;h3&gt;Band Promo&lt;/h3&gt;
                          &lt;/a&gt;
                      &lt;/section&gt;
                      &lt;section class="secLI"&gt;
                          &lt;a href="contact/contact.html" class="li6"&gt;
                            &lt;h3&gt;Contact&lt;/h3&gt;
                          &lt;/a&gt;
                      &lt;/section&gt;
                    &lt;/div&gt;
  
  
  
  
  CSS
  
  
  .wrap {
              color: #ff7800;
              text-align: center;
              clear: both;
                      /**Background**/
                      background: #366ce8;
              width: 100%;
              border: none;
              padding-top: 4vh;
              padding: 2.5vh 0 1.5vh;
                      /*Wrap FlexBox Settings*/
                      display: -webkit-box;
                          display: -moz-box;
                          display: -ms-flexbox;
                          display: -webkit-flex;
                          display: -o-flex;
                          display: flex;
                      -webkit-justify-content: center;
                          -moz-justify-content: center;
                          -ms-justify-content: center;
                          -o-justify-content: center;
                          justify-content: center;                        
                      -webkit-flex-wrap: wrap;
                          -moz-flex-wrap: wrap;
                          -ms-flex-wrap: wrap;
                          -o-flex-wrap: wrap;
                          flex-wrap: wrap;
          }
  
          .wrap section {
            -webkit-flex: 1;
                -moz-flex: 1;
                -ms-flex: 1;
                -o-flex: 1;
                flex: 1;
            cursor: pointer;
            background: #cddc39;
            transition: all .5s;
            text-align: center;
          }
          .wrap section:hover {
            -webkit-flex: 1.5;
                -moz-flex: 1.5;
                -ms-flex: 1.5;
                -o-flex: 1.5;
                flex: 1.5;
            background: #e6ee9c;
  
  
            -webkit-animation: -webkit-flex;
              animation: flex;
                  -webkit-animation-delay: 3s;
                  animation-delay: 3s;
            -webkit-transition-property: -webkit-flex;
              -moz-transition-property: -moz-flex;
              -ms-transition-property: -ms-flex;
              -o-transition-property: -o-flex;
              transition-property: flex;
            -webkit-transition-duration: 2s;
              -moz-transition-duration: 2s;
              -ms-transition-duration: 2s;
              -o-transition-duration: 2s;
              transition-duration: 2s;
            }
  </code></pre>