我正在尝试使用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;
}
答案 0 :(得分：1)
使用相同的HTML，这是我想出的CSS。注意＆＃34;！important＆＃34;增值。直到我添加了这些代码，即使在重新加载/刷新之后，代码也无效。
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; }
}