css - Flexbox 的动画或过渡属性

Question

我正在尝试让 flexbox 属性与过渡一起使用。现在，元素卡入到位。我需要它们在悬停时平稳过渡。我尝试了几件事，但似乎没有任何效果。我需要具有良好跨浏览器兼容性且显示良好的东西。

这段代码哪里出错了？

HTML
            <!--TOP-->
                <div class="wrap">
                    <section class="secLI">
                        <a href="index.html" class="li4">
                          <h3>Home</h3> 
                        </a>
                    </section>
                    <section class="secLI">
                        <a href="services/services.html" class="li5">
                          <h3>Services</h3>
                        </a>
                    </section>
                    <section class="secLI">
                        <a href="events/events.html" class="li6">
                          <h3>Events</h3>
                        </a>
                    </section>
                  </div>

              <!--BOTTOM-->
                  <div class="wrap">
                      <section class="secLI">
                        <a href="plan/plan.html" class="li4">
                          <h3>Plan an Event</h3> 
                        </a>
                    </section>
                    <section class="secLI">
                        <a href="bands/bands.html" class="li5">
                          <h3>Band Promo</h3>
                        </a>
                    </section>
                    <section class="secLI">
                        <a href="contact/contact.html" class="li6">
                          <h3>Contact</h3>
                        </a>
                    </section>
                  </div>




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

Answer 1

使用相同的 HTML，这是我想出的有效 CSS。请注意“!important”的附加值。在我添加这些代码之前，代码无法运行，即使在硬重新加载/刷新之后也是如此。

CSS

.wrap section:hover {
          background: #e6ee9c;


                  -webkit-animation-name: flexExpand;
                  -webkit-animation-duration: 1s;
                  -webkit-animation-delay: .2s;
                  -webkit-animation-fill-mode: forwards !important; 
                  -moz-animation-name: flexExpand;
                  -moz-animation-duration: 1s;
                  -mozt-animation-delay: .2s;
                  -moz-animation-fill-mode: forwards !important;    
                  -ms-animation-name: flexExpand;
                  -ms-animation-duration: 1s;
                  -ms-animation-delay: .2s;
                  -ms-animation-fill-mode: forwards !important; 
                  -o-animation-name: flexExpand;
                  -o-animation-duration: 1s;
                  -o-animation-delay: .2s;
                  -o-animation-fill-mode: forwards !important;               
                  animation-name: flexExpand;
                  animation-duration: 1s;
                  animation-delay: .2s;
                  animation-fill-mode: forwards !important;
        }

                  @-webkit-keyframes flexExpand {
                      from { -webkit-flex: 1; }
                      to { -webkit-flex: 1.5; }
                      from { flex: 1; }
                      to { flex: 1.5; }
                  }                   
                  @-moz-keyframes flexExpand {
                      from { -webkit-flex: 1; }
                      to { -webkit-flex: 1.5; }
                      from { flex: 1; }
                      to { flex: 1.5; }
                  }
                  @-ms-keyframes flexExpand {
                      from { -webkit-flex: 1; }
                      to { -webkit-flex: 1.5; }
                      from { flex: 1; }
                      to { flex: 1.5; }
                  }
                  @-o-keyframes flexExpand {
                      from { -webkit-flex: 1; }
                      to { -webkit-flex: 1.5; }
                      from { flex: 1; }
                      to { flex: 1.5; }
                  }
                  @keyframes flexExpand {
                      from { -webkit-flex: 1; }
                      to { -webkit-flex: 1.5; }
                      from { flex: 1; }
                      to { flex: 1.5; }
                  }